Skip to content

Commit eb1f3e4

Browse files
hannahmcgtesthieungo89patrickwchoi
authored
Make Navbar responsive through use of MUI drawer component (#181)
* make navbar responsive through use of mui drawer component * fix styling and refactor navbar Co-authored-by: Hieu Ngo <hieu.ngo12989@gmail.com> Co-authored-by: Patrick Choi <ptrckchoi@gmail.com> * center nav menu, css alignment, extract logo. Co-authored-by: Patrick Choi <ptrckchoi@gmail.com> Co-authored-by: Hannah McGowan <hannahhmcgowan@gmail.com> * Run format and remove unused classnames Co-authored-by: Patrick Choi <ptrckchoi@gmail.com> Co-authored-by: Hannah McGowan <hannahhmcgowan@gmail.com> * fix link structure Co-authored-by: Patrick Choi <ptrckchoi@gmail.com> Co-authored-by: Hannah McGowan <hannahhmcgowan@gmail.com> * Adjust breakpoints to fit the stated amount in global css * Ajust toolbar color based on designer's input. Extracted Toolbar to reusable function. Blocked on Type Element is not assignable to Type string * Extract ListItem and fix type issue --------- Co-authored-by: test <test@MacBook-Pro-2.attlocal.net> Co-authored-by: Hieu Ngo <hieu.ngo12989@gmail.com> Co-authored-by: Patrick Choi <ptrckchoi@gmail.com>
1 parent 8ecbb3a commit eb1f3e4

File tree

5 files changed

+179
-78
lines changed

5 files changed

+179
-78
lines changed

‎src/components/layout/Layout.module.css

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
color: var(--on-background);
1212
height: 100%;
1313
width: 100%;
14-
padding: 1em;
14+
padding: 5em 3em 3em 3em;
1515
}
1616

1717
.mainPurple {
@@ -24,18 +24,27 @@
2424
background-color: var(--grey-80);
2525
}
2626

27+
/* @media only screen and (max-width: 480px) {
28+
.main {
29+
padding: 5em 3em 3em 3em;
30+
}
31+
} */
32+
2733
@media only screen and (min-width: 480px) {
34+
.main {
35+
padding: 5em 3em 3em 3em;
36+
}
2837
}
2938

3039
/* Small Devices, Tablets */
3140
@media only screen and (min-width: 768px) {
41+
.main {
42+
padding: 5em 3em 3em 3em;
43+
}
3244
}
3345

3446
/* Medium Devices, Desktops */
3547
@media only screen and (min-width: 992px) {
36-
.main {
37-
padding: 5em;
38-
}
3948
}
4049

4150
/* Large Devices, Wide Screens */

‎src/components/navbar/NavBar.tsx

Lines changed: 134 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,146 @@
1-
import React from "react";
2-
import $navbar from "./Navbar.module.css";
3-
import Link from "next/link";
1+
import CloseIcon from "@mui/icons-material/Close";
2+
import CoPresent from "@mui/icons-material/CoPresent";
3+
import Logout from "@mui/icons-material/Logout";
4+
import MenuIcon from "@mui/icons-material/Menu";
5+
import PeopleOutline from "@mui/icons-material/PeopleOutline";
6+
import Settings from "@mui/icons-material/Settings";
7+
import AppBar from "@mui/material/AppBar";
8+
import Box from "@mui/material/Box";
9+
import Drawer from "@mui/material/Drawer";
10+
import IconButton from "@mui/material/IconButton";
11+
import List from "@mui/material/List";
12+
import ListItem from "@mui/material/ListItem";
13+
import Toolbar from "@mui/material/Toolbar";
14+
import useMediaQuery from "@mui/material/useMediaQuery";
15+
import { signOut, useSession } from "next-auth/react";
416
import Image from "next/image";
5-
import {
6-
PeopleOutline,
7-
CoPresent,
8-
Settings,
9-
Logout,
10-
} from "@mui/icons-material";
11-
import { signOut } from "next-auth/react";
12-
import { useSession } from "next-auth/react";
17+
import Link from "next/link";
18+
import * as React from "react";
19+
import { MouseEventHandler } from "react";
20+
import $navbar from "./Navbar.module.css";
21+
22+
interface NavItemProps {
23+
href?: string;
24+
icon: React.ReactNode;
25+
text: string;
26+
onClick?: MouseEventHandler<HTMLParagraphElement>;
27+
}
28+
29+
export default function NavBar() {
30+
const [mobileOpen, setMobileOpen] = React.useState(false);
31+
const desktop = useMediaQuery("(min-width: 992px)");
1332

14-
const NavBar = () => {
1533
const { status } = useSession();
1634

35+
const handleDrawerToggle = () => {
36+
setMobileOpen(!mobileOpen);
37+
};
38+
39+
const logo = (
40+
<Link href="/">
41+
<Image
42+
src="/img/compass-logo-white.svg"
43+
alt="logo"
44+
className={$navbar.logo}
45+
width={64}
46+
height={64}
47+
priority
48+
/>
49+
</Link>
50+
);
51+
52+
const ToolbarMenu = ({ name }: { name: React.ReactNode }) => (
53+
<Toolbar className={$navbar.toolbar}>
54+
{logo}
55+
<IconButton
56+
color="inherit"
57+
aria-label="open drawer"
58+
edge="start"
59+
onClick={handleDrawerToggle}
60+
sx={{ mr: 2, display: desktop ? "none" : "" }}
61+
>
62+
{name}
63+
</IconButton>
64+
</Toolbar>
65+
);
66+
67+
const NavItem = ({ href, icon, text, onClick }: NavItemProps) => (
68+
<ListItem disablePadding className={$navbar.linkItem}>
69+
<Link href={href || ""} className={$navbar.link}>
70+
{icon}
71+
<p className={$navbar.linkTitle} onClick={onClick}>
72+
{text}
73+
</p>
74+
</Link>
75+
</ListItem>
76+
);
77+
78+
const drawer = (
79+
<div className={$navbar.sidebar}>
80+
<List>
81+
<NavItem href="/students" icon={<PeopleOutline />} text="Students" />
82+
<NavItem href="/staff" icon={<CoPresent />} text="Staff" />
83+
<NavItem href="/settings" icon={<Settings />} text="Settings" />
84+
<NavItem
85+
icon={<Logout />}
86+
text="Logout"
87+
onClick={() => signOut({ callbackUrl: "/" })}
88+
/>
89+
</List>
90+
</div>
91+
);
92+
1793
return (
1894
<>
1995
{status === "authenticated" && (
20-
<nav className={$navbar.sidebar}>
21-
<Link href="/">
22-
<Image
23-
src="/img/compass-logo-white.svg"
24-
alt="logo"
25-
className={$navbar.logo}
26-
width={64}
27-
height={64}
28-
priority
96+
<Box sx={{ display: "flex" }}>
97+
{/* Sidebar for screens > md size */}
98+
<Box
99+
component="nav"
100+
aria-label="nav"
101+
className={$navbar.sidebar}
102+
sx={{
103+
display: desktop ? "block" : "none",
104+
width: "200px",
105+
}}
106+
>
107+
{logo}
108+
{drawer}
109+
</Box>
110+
111+
{/* Top nav for screen <= md size */}
112+
<AppBar
113+
position="fixed"
114+
sx={{
115+
display: desktop ? "none" : "block",
116+
}}
117+
>
118+
<ToolbarMenu
119+
name={<MenuIcon className={$navbar.burger} fontSize="large" />}
29120
/>
30-
</Link>
31-
<br />
121+
</AppBar>
32122

33-
<div className={$navbar.linkContainer}>
34-
<Link href="/students" className={$navbar.link}>
35-
<PeopleOutline className={$navbar.icon} />
36-
<p className={$navbar.linkTitle}>Students</p>
37-
</Link>
38-
<br />
39-
<Link href="/staff" className={$navbar.link}>
40-
<CoPresent className={$navbar.icon} />
41-
<p className={$navbar.linkTitle}>Staff</p>
42-
</Link>
43-
<br />
44-
<Link href="/settings" className={$navbar.link}>
45-
<Settings className={$navbar.icon} />
46-
<p className={$navbar.linkTitle}>Settings</p>
47-
</Link>
48-
<br />
49-
<Link href="" className={$navbar.link}>
50-
<Logout className={$navbar.icon} />
51-
<p
52-
className={$navbar.linkTitle}
53-
onClick={() => signOut({ callbackUrl: "/" })}
54-
>
55-
Logout
56-
</p>
57-
</Link>
58-
</div>
59-
</nav>
123+
{/* Modal for sidebar when screen is <= md size */}
124+
<Drawer
125+
variant="temporary"
126+
anchor="top"
127+
open={mobileOpen}
128+
onClick={handleDrawerToggle}
129+
sx={{
130+
display: desktop ? "none" : "block",
131+
"& .MuiDrawer-paper": {
132+
boxSizing: "border-box",
133+
width: "full",
134+
},
135+
}}
136+
>
137+
<ToolbarMenu
138+
name={<CloseIcon className={$navbar.burger} fontSize="large" />}
139+
/>
140+
{drawer}
141+
</Drawer>
142+
</Box>
60143
)}
61144
</>
62145
);
63-
};
64-
65-
export default NavBar;
146+
}

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

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,42 @@
1-
.sidebar {
2-
flex: 2;
3-
background-color: var(--primary-20);
1+
.logo {
2+
padding: 1rem;
43
}
54

6-
.linkContainer {
5+
.toolbar {
6+
background-color: var(--primary-40);
77
display: flex;
8-
flex-direction: column;
8+
justify-content: space-between;
9+
box-shadow: 0;
910
}
1011

11-
.logo {
12-
padding-left: 28px;
13-
padding-top: 12px;
14-
padding-bottom: 10px;
12+
.sidebar {
13+
background-color: var(--primary-40);
14+
}
15+
16+
.linkItem {
17+
padding: 1.25rem 0 1.25rem calc(45% - 1.5rem * 1.5);
1518
}
1619

1720
.link {
1821
color: var(--on-primary);
19-
padding-left: 30px;
20-
padding-top: 12px;
21-
padding-bottom: 12px;
22-
display: flex;
23-
align-items: center;
2422
text-decoration: none;
23+
display: flex;
2524
}
2625

2726
.linkTitle {
28-
padding-left: 8px;
27+
padding-left: 1rem;
2928
}
3029

31-
.link:hover {
32-
background-color: #383473;
30+
.linkItem:hover {
31+
background-color: var(--primary-60);
3332
}
3433

35-
.icon {
36-
color: var(--on-primary);
34+
.burger {
35+
color: var(--primary-99);
36+
}
37+
38+
@media (min-width: 992px) {
39+
.linkItem {
40+
padding-left: 9%;
41+
}
3742
}

‎src/components/table/table.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,8 @@ function EnhancedTableToolbar({
133133
return (
134134
<Toolbar
135135
sx={{
136-
pl: { sm: 0 },
137-
pr: { xs: 0, sm: 0 },
136+
pl: { xs: 0 },
137+
pr: { xs: 0 },
138138
flexDirection: "column",
139139
}}
140140
>

‎src/styles/globals.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ body,
6666
#__next {
6767
height: 100%;
6868
overflow-x: auto;
69+
padding-top: 0.5rem;
6970
}
7071

7172
h1,
@@ -144,6 +145,11 @@ textarea {
144145

145146
/* Medium Devices, Desktops */
146147
@media only screen and (min-width: 992px) {
148+
html,
149+
body,
150+
#__next {
151+
padding-top: 0;
152+
}
147153
}
148154

149155
/* Large Devices, Wide Screens */

0 commit comments

Comments
 (0)