Add breadcrumbs

src/components/breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,18 @@
+.container {
+  position: fixed;
+  display: flex;
+  left: 200px;
+  z-index: 1;
+  padding: 1rem 0 1rem 2rem;
+  width: 100%;
+  background-color: var(--grey-100);
+}
+
+.link {
+  text-decoration: none;
+  color: var(--grey-10);
+}
+
+.link:hover {
+  text-decoration: underline;
+}

src/components/breadcrumbs/BreadcrumbsNav.tsx

@@ -0,0 +1,55 @@
+import { trpc } from "@/client/lib/trpc";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { SelectableForTable } from "zapatos/schema";
+import $breadcrumbs from "./Breadcrumbs.module.css";
+
+type Student = SelectableForTable<"student">;
+type Para = SelectableForTable<"user">;
+
+const BreadcrumbsNav = () => {
+  const router = useRouter();
+  const paths = router.asPath.split("/");
+
+  const { data: student } = trpc.student.getStudentById.useQuery(
+    { student_id: paths[2] },
+    { enabled: Boolean(paths[2] && paths[1] === "students") }
+  );
+  const { data: para } = trpc.para.getParaById.useQuery(
+    { user_id: paths[2] },
+    { enabled: Boolean(paths[2] && paths[1] === "staff") }
+  );
+
+  const personData: Student | Para | undefined = student || para;
+
+  // An array of breadcrumbs fixed to students/staff as the first index. This will be modified depending on how the address bar will be displayed.
+  const breadcrumbs = paths.map((path, index) => {
+    if (index === 0) return "";
+    if (index % 2 === 1) {
+      return (
+        <Link key={index} href={`/${path}`} className={$breadcrumbs.link}>
+          {path.toUpperCase()}
+        </Link>
+      );
+    }
+    if (index === 2) {
+      return (
+        <div key={index} style={{ color: "var(--grey-10)" }}>
+          {personData?.first_name} {personData?.last_name}
+        </div>
+      );
+    }
+    return <div key={index}>{path}</div>;
+  });
+
+  return (
+    <div className={$breadcrumbs.container}>
+      <Breadcrumbs separator="/" aria-label="breadcrumb">
+        {breadcrumbs}
+      </Breadcrumbs>
+    </div>
+  );
+};
+
+export default BreadcrumbsNav;

src/components/navbar/NavBar.tsx

@@ -19,6 +19,7 @@ import { useRouter } from "next/router";
 import * as React from "react";
 import { MouseEventHandler } from "react";
 import $navbar from "./Navbar.module.css";
+import BreadcrumbsNav from "../breadcrumbs/BreadcrumbsNav";
 
 interface NavItemProps {
   href?: string;
@@ -57,9 +58,8 @@ export default function NavBar() {
       <IconButton
         color="inherit"
         aria-label="open drawer"
-        edge="start"
         onClick={handleDrawerToggle}
-        sx={{ mr: 2, display: desktop ? "none" : "" }}
+        sx={{ mr: 2 }}
       >
         {name}
       </IconButton>
@@ -87,7 +87,7 @@ export default function NavBar() {
   };
 
   const drawer = (
-    <div className={$navbar.sidebar}>
+    <div className={$navbar.navbarDropdown}>
       <List>
         <NavItem href="/students" icon={<PeopleOutline />} text="Students" />
         <NavItem href="/staff" icon={<CoPresent />} text="Staff" />
@@ -105,51 +105,49 @@ export default function NavBar() {
     <>
       {status === "authenticated" && (
         <Box sx={{ display: "flex" }}>
-          {/* Sidebar for screens > md size */}
-          <Box
-            component="nav"
-            aria-label="nav"
-            className={$navbar.sidebar}
-            sx={{
-              display: desktop ? "block" : "none",
-              width: "200px",
-            }}
-          >
-            {logo}
-            {drawer}
-          </Box>
+          {desktop ? (
+            <>
+              {/* Sidebar for screens & breadcrumbs > md size */}
+              <Box component="nav" aria-label="nav" className={$navbar.sidebar}>
+                {logo}
+                {drawer}
+              </Box>
+              <BreadcrumbsNav />
+            </>
+          ) : (
+            <>
+              {/* Top nav for screen <= md size */}
+              <AppBar position="fixed" sx={{ display: "block" }}>
+                <ToolbarMenu
+                  name={
+                    <MenuIcon className={$navbar.burger} fontSize="large" />
+                  }
+                />
+              </AppBar>
 
-          {/* Top nav for screen <= md size */}
-          <AppBar
-            position="fixed"
-            sx={{
-              display: desktop ? "none" : "block",
-            }}
-          >
-            <ToolbarMenu
-              name={<MenuIcon className={$navbar.burger} fontSize="large" />}
-            />
-          </AppBar>
-
-          {/* Modal for sidebar when screen is <= md size */}
-          <Drawer
-            variant="temporary"
-            anchor="top"
-            open={mobileOpen}
-            onClick={handleDrawerToggle}
-            sx={{
-              display: desktop ? "none" : "block",
-              "& .MuiDrawer-paper": {
-                boxSizing: "border-box",
-                width: "full",
-              },
-            }}
-          >
-            <ToolbarMenu
-              name={<CloseIcon className={$navbar.burger} fontSize="large" />}
-            />
-            {drawer}
-          </Drawer>
+              {/* Modal for sidebar when screen is <= md size */}
+              <Drawer
+                variant="temporary"
+                anchor="top"
+                open={mobileOpen}
+                onClick={handleDrawerToggle}
+                sx={{
+                  display: "block",
+                  "& .MuiDrawer-paper": {
+                    boxSizing: "border-box",
+                    width: "full",
+                  },
+                }}
+              >
+                <ToolbarMenu
+                  name={
+                    <CloseIcon className={$navbar.burger} fontSize="large" />
+                  }
+                />
+                {drawer}
+              </Drawer>
+            </>
+          )}
         </Box>
       )}
     </>

src/components/navbar/Navbar.module.css

@@ -7,10 +7,17 @@
   display: flex;
   justify-content: space-between;
   box-shadow: 0;
+  padding: 0;
+}
+
+.navbarDropdown {
+  background-color: var(--primary-40);
 }
 
 .sidebar {
   background-color: var(--primary-40);
+  display: block;
+  width: 200px;
 }
 
 .link {