Incorporate MUI breadcrumbs into file. Rename Breadcrumbs to Breadcru…

…mbsNav. Extract CSS to its own file.

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,60 @@
+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";
+
+const BreadcrumbsNav = () => {
+  const router = useRouter();
+  const paths = router.asPath.split("/");
+
+  let personData:
+    | SelectableForTable<"student">
+    | SelectableForTable<"user">
+    | undefined;
+
+  if (paths[1] === "students" && paths[2]) {
+    const { data } = trpc.student.getStudentById.useQuery(
+      { student_id: paths[2] },
+      { enabled: Boolean(paths[2]), retry: false }
+    );
+    personData = data;
+  } else if (paths[1] === "staff" && paths[2]) {
+    const { data } = trpc.para.getParaById.useQuery(
+      { user_id: paths[2] },
+      { enabled: Boolean(paths[2]), retry: false }
+    );
+    personData = data;
+  }
+
+  // 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,7 +19,7 @@ import { useRouter } from "next/router";
 import * as React from "react";
 import { MouseEventHandler } from "react";
 import $navbar from "./Navbar.module.css";
-import Breadcrumbs from "../breadcrumbs/breadcrumbs";
+import BreadcrumbsNav from "../breadcrumbs/BreadcrumbsNav";
 
 interface NavItemProps {
   href?: string;
@@ -112,7 +112,7 @@ export default function NavBar() {
                 {logo}
                 {drawer}
               </Box>
-              <Breadcrumbs />
+              <BreadcrumbsNav />
             </>
           ) : (
             <>