Skip to content

Commit 5dd8421

Browse files
hieungo89hieungo89
authored
Add breadcrumbs (#268)
1 parent b70fa48 commit 5dd8421

File tree

4 files changed

+130
-47
lines changed

4 files changed

+130
-47
lines changed

‎src/components/breadcrumbs/Breadcrumbs.module.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.container {
2+
position: fixed;
3+
display: flex;
4+
left: 200px;
5+
z-index: 1;
6+
padding: 1rem 0 1rem 2rem;
7+
width: 100%;
8+
background-color: var(--grey-100);
9+
}
10+
11+
.link {
12+
text-decoration: none;
13+
color: var(--grey-10);
14+
}
15+
16+
.link:hover {
17+
text-decoration: underline;
18+
}

‎src/components/breadcrumbs/BreadcrumbsNav.tsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { trpc } from "@/client/lib/trpc";
2+
import Breadcrumbs from "@mui/material/Breadcrumbs";
3+
import Link from "next/link";
4+
import { useRouter } from "next/router";
5+
import { SelectableForTable } from "zapatos/schema";
6+
import $breadcrumbs from "./Breadcrumbs.module.css";
7+
8+
type Student = SelectableForTable<"student">;
9+
type Para = SelectableForTable<"user">;
10+
11+
const BreadcrumbsNav = () => {
12+
const router = useRouter();
13+
const paths = router.asPath.split("/");
14+
15+
// student and para queries will only runs if enabled options are both true
16+
// Only 1 of these will run at a time based on the conditions
17+
const { data: student } = trpc.student.getStudentById.useQuery(
18+
{ student_id: paths[2] },
19+
{ enabled: Boolean(paths[2] && paths[1] === "students") }
20+
);
21+
const { data: para } = trpc.para.getParaById.useQuery(
22+
{ user_id: paths[2] },
23+
{ enabled: Boolean(paths[2] && paths[1] === "staff") }
24+
);
25+
26+
const personData: Student | Para | undefined = student || para;
27+
28+
// 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.
29+
const breadcrumbs = paths.map((path, index) => {
30+
// 0th index seems to only be empty string
31+
if (index === 0) return "";
32+
// 1st index currently is either students or staff
33+
if (index % 2 === 1) {
34+
return (
35+
<Link key={index} href={`/${path}`} className={$breadcrumbs.link}>
36+
{path.toUpperCase()}
37+
</Link>
38+
);
39+
}
40+
// 2nd index is the ID referencing 1st index
41+
if (index === 2) {
42+
return (
43+
<div key={index} style={{ color: "var(--grey-10)" }}>
44+
{personData?.first_name} {personData?.last_name}
45+
</div>
46+
);
47+
}
48+
return <div key={index}>{path}</div>;
49+
});
50+
51+
return (
52+
<div className={$breadcrumbs.container}>
53+
<Breadcrumbs separator="/" aria-label="breadcrumb">
54+
{breadcrumbs}
55+
</Breadcrumbs>
56+
</div>
57+
);
58+
};
59+
60+
export default BreadcrumbsNav;

‎src/components/navbar/NavBar.tsx

Lines changed: 45 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { useRouter } from "next/router";
1919
import * as React from "react";
2020
import { MouseEventHandler } from "react";
2121
import $navbar from "./Navbar.module.css";
22+
import BreadcrumbsNav from "../breadcrumbs/BreadcrumbsNav";
2223

2324
interface NavItemProps {
2425
href?: string;
@@ -57,9 +58,8 @@ export default function NavBar() {
5758
<IconButton
5859
color="inherit"
5960
aria-label="open drawer"
60-
edge="start"
6161
onClick={handleDrawerToggle}
62-
sx={{ mr: 2, display: desktop ? "none" : "" }}
62+
sx={{ mr: 2 }}
6363
>
6464
{name}
6565
</IconButton>
@@ -87,7 +87,7 @@ export default function NavBar() {
8787
};
8888

8989
const drawer = (
90-
<div className={$navbar.sidebar}>
90+
<div className={$navbar.navbarDropdown}>
9191
<List>
9292
<NavItem href="/students" icon={<PeopleOutline />} text="Students" />
9393
<NavItem href="/staff" icon={<CoPresent />} text="Staff" />
@@ -105,51 +105,49 @@ export default function NavBar() {
105105
<>
106106
{status === "authenticated" && (
107107
<Box sx={{ display: "flex" }}>
108-
{/* Sidebar for screens > md size */}
109-
<Box
110-
component="nav"
111-
aria-label="nav"
112-
className={$navbar.sidebar}
113-
sx={{
114-
display: desktop ? "block" : "none",
115-
width: "200px",
116-
}}
117-
>
118-
{logo}
119-
{drawer}
120-
</Box>
108+
{desktop ? (
109+
<>
110+
{/* Sidebar for screens & breadcrumbs > md size */}
111+
<Box component="nav" aria-label="nav" className={$navbar.sidebar}>
112+
{logo}
113+
{drawer}
114+
</Box>
115+
<BreadcrumbsNav />
116+
</>
117+
) : (
118+
<>
119+
{/* Top nav for screen <= md size */}
120+
<AppBar position="fixed" sx={{ display: "block" }}>
121+
<ToolbarMenu
122+
name={
123+
<MenuIcon className={$navbar.burger} fontSize="large" />
124+
}
125+
/>
126+
</AppBar>
121127

122-
{/* Top nav for screen <= md size */}
123-
<AppBar
124-
position="fixed"
125-
sx={{
126-
display: desktop ? "none" : "block",
127-
}}
128-
>
129-
<ToolbarMenu
130-
name={<MenuIcon className={$navbar.burger} fontSize="large" />}
131-
/>
132-
</AppBar>
133-
134-
{/* Modal for sidebar when screen is <= md size */}
135-
<Drawer
136-
variant="temporary"
137-
anchor="top"
138-
open={mobileOpen}
139-
onClick={handleDrawerToggle}
140-
sx={{
141-
display: desktop ? "none" : "block",
142-
"& .MuiDrawer-paper": {
143-
boxSizing: "border-box",
144-
width: "full",
145-
},
146-
}}
147-
>
148-
<ToolbarMenu
149-
name={<CloseIcon className={$navbar.burger} fontSize="large" />}
150-
/>
151-
{drawer}
152-
</Drawer>
128+
{/* Modal for sidebar when screen is <= md size */}
129+
<Drawer
130+
variant="temporary"
131+
anchor="top"
132+
open={mobileOpen}
133+
onClick={handleDrawerToggle}
134+
sx={{
135+
display: "block",
136+
"& .MuiDrawer-paper": {
137+
boxSizing: "border-box",
138+
width: "full",
139+
},
140+
}}
141+
>
142+
<ToolbarMenu
143+
name={
144+
<CloseIcon className={$navbar.burger} fontSize="large" />
145+
}
146+
/>
147+
{drawer}
148+
</Drawer>
149+
</>
150+
)}
153151
</Box>
154152
)}
155153
</>

‎src/components/navbar/Navbar.module.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,17 @@
77
display: flex;
88
justify-content: space-between;
99
box-shadow: 0;
10+
padding: 0;
11+
}
12+
13+
.navbarDropdown {
14+
background-color: var(--primary-40);
1015
}
1116

1217
.sidebar {
1318
background-color: var(--primary-40);
19+
display: block;
20+
width: 200px;
1421
}
1522

1623
.link {

0 commit comments

Comments
 (0)