Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Navbar responsive through use of MUI drawer component #181

Merged
merged 9 commits into from
Oct 23, 2023
Merged

Make Navbar responsive through use of MUI drawer component #181

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b485de0
make navbar responsive through use of mui drawer component
Aug 17, 2023
6e694b1
fix styling and refactor navbar
Sep 27, 2023
afd6d1e
center nav menu, css alignment, extract logo.
hieungo89 Oct 16, 2023
9af477f
Merge branch 'main' into responsiveNav
hieungo89 Oct 16, 2023
aebadb7
Run format and remove unused classnames
hieungo89 Oct 16, 2023
f7ecc99
fix link structure
hieungo89 Oct 17, 2023
623fbe5
Adjust breakpoints to fit the stated amount in global css
hieungo89 Oct 17, 2023
a4fc38a
Ajust toolbar color based on designer's input. Extracted Toolbar to r…
hieungo89 Oct 18, 2023
c1cbfdc
Extract ListItem and fix type issue
hieungo89 Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions src/components/layout/Layout.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
color: var(--on-background);
height: 100%;
width: 100%;
padding: 1em;
padding: 5em 3em 3em 3em;
hieungo89 marked this conversation as resolved.
Show resolved Hide resolved
}

.mainPurple {
Expand All @@ -24,18 +24,27 @@
background-color: var(--grey-80);
}

/* @media only screen and (max-width: 480px) {
.main {
padding: 5em 3em 3em 3em;
}
} */

@media only screen and (min-width: 480px) {
.main {
padding: 5em 3em 3em 3em;
}
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
.main {
padding: 5em 3em 3em 3em;
}
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
.main {
padding: 5em;
}
}

/* Large Devices, Wide Screens */
Expand Down
170 changes: 126 additions & 44 deletions src/components/navbar/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import React from "react";
import $navbar from "./Navbar.module.css";
import Link from "next/link";
import Image from "next/image";
Expand All @@ -10,56 +9,139 @@ import {
} from "@mui/icons-material";
import { signOut } from "next-auth/react";
import { useSession } from "next-auth/react";
import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
hannahmcg marked this conversation as resolved.
Show resolved Hide resolved
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";

export default function NavBar() {
const [mobileOpen, setMobileOpen] = React.useState(false);

const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};

const drawer = (
<div className={$navbar.sidebar}>
<Link href="/">
<Image
src="/img/compass-logo-white.svg"
alt="logo"
className={$navbar.logo}
width={64}
height={64}
priority
/>
</Link>
<List className={$navbar.list}>
<Link href="/students" className={$navbar.linkItem}>
<ListItem disablePadding className={$navbar.link}>
hieungo89 marked this conversation as resolved.
Show resolved Hide resolved
<PeopleOutline className={$navbar.icon} />
<p className={$navbar.linkTitle}>Students</p>
</ListItem>
</Link>
<Link href="/staff" className={$navbar.linkItem}>
<ListItem disablePadding className={$navbar.link}>
<CoPresent className={$navbar.icon} />
<p className={$navbar.linkTitle}>Staff</p>
</ListItem>
</Link>
<Link href="/settings" className={$navbar.linkItem}>
<ListItem disablePadding className={$navbar.link}>
<Settings className={$navbar.icon} />
<p className={$navbar.linkTitle}>Settings</p>
</ListItem>
</Link>
<Link href="" className={$navbar.linkItem}>
<ListItem disablePadding className={$navbar.link}>
<Logout className={$navbar.icon} />
<p
className={$navbar.linkTitle}
onClick={() => signOut({ callbackUrl: "/" })}
>
Logout
</p>
</ListItem>
</Link>
</List>
</div>
);

const NavBar = () => {
const { status } = useSession();

return (
<>
{status === "authenticated" && (
<nav className={$navbar.sidebar}>
<Link href="/">
<Image
src="/img/compass-logo-white.svg"
alt="logo"
className={$navbar.logo}
width={64}
height={64}
priority
/>
</Link>
<br />

<div className={$navbar.linkContainer}>
<Link href="/students" className={$navbar.link}>
<PeopleOutline className={$navbar.icon} />
<p className={$navbar.linkTitle}>Students</p>
</Link>
<br />
<Link href="/staff" className={$navbar.link}>
<CoPresent className={$navbar.icon} />
<p className={$navbar.linkTitle}>Staff</p>
</Link>
<br />
<Link href="/settings" className={$navbar.link}>
<Settings className={$navbar.icon} />
<p className={$navbar.linkTitle}>Settings</p>
</Link>
<br />
<Link href="" className={$navbar.link}>
<Logout className={$navbar.icon} />
<p
className={$navbar.linkTitle}
onClick={() => signOut({ callbackUrl: "/" })}
<Box sx={{ display: "flex" }}>
{/* Top nav for screen <= md size */}
<AppBar
position="fixed"
sx={{
display: { xs: "block", md: "none" },
}}
>
<Toolbar className={$navbar.toolbar}>
<Link href="/">
<Image
src="/img/compass-logo-white.svg"
alt="logo"
className={$navbar.logo}
width={56}
height={56}
priority
/>
</Link>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { md: "none" } }}
>
Logout
</p>
</Link>
</div>
</nav>
<MenuIcon className={$navbar.burger} fontSize="large" />
</IconButton>
</Toolbar>
</AppBar>

{/* Sidebar for screens > md size */}
<Box
component="nav"
sx={{
display: { xs: "none", md: "block" },
width: { md: "200px" },
flexShrink: { md: 0 },
}}
aria-label="nav"
className={$navbar.sidebar}
>
{drawer}
</Box>

{/* Modal for sidebar when screen is <= md size */}
<Drawer
variant="temporary"
open={mobileOpen}
onClick={handleDrawerToggle}
sx={{
display: { xs: "block", md: "none" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: "200px",
},
}}
>
{drawer}
</Drawer>
</Box>
)}
</>
);
};

export default NavBar;
}
40 changes: 31 additions & 9 deletions src/components/navbar/Navbar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
.sidebar {
flex: 2;
background-color: var(--primary-20);
}

.linkContainer {
display: flex;
flex-direction: column;
padding-top: 8px;
}

.logo {
Expand All @@ -14,24 +10,50 @@
padding-bottom: 10px;
}

.toolbar {
background-color: var(--primary-20);
display: flex;
justify-content: space-between;
box-shadow: 0;
}

.list {
color: white;
}

.burger {
color: var(--primary-99);
width: 2em;
height: 2em;
}

.link {
color: var(--on-primary);
padding-left: 30px;
padding-top: 12px;
padding-bottom: 12px;
padding-top: 22px;
padding-bottom: 22px;
display: flex;
align-items: center;
text-decoration: none;
}

.linkTitle {
padding-left: 8px;
}

.link:hover {
.linkItem {
text-decoration: none;
}

.linkItem:hover {
display: flex;
align-items: center;
}

.linkItem:hover {
background-color: #383473;
}
hannahmcg marked this conversation as resolved.
Show resolved Hide resolved

.icon {
color: var(--on-primary);
margin-right: 8px;
}
4 changes: 2 additions & 2 deletions src/components/table/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,8 @@ function EnhancedTableToolbar({
return (
<Toolbar
sx={{
pl: { sm: 0 },
pr: { xs: 0, sm: 0 },
pl: { xs: 0 },
pr: { xs: 0 },
flexDirection: "column",
}}
>
Expand Down