pulled, changed navbar to not have any errors

sfbrigade · Nov 3, 2023 · 71fb97f · 71fb97f
1 parent efb5d0d
commit 71fb97f
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 52 deletions.
diff --git a/src/components/navbar/NavBar.tsx b/src/components/navbar/NavBar.tsx
@@ -18,64 +18,129 @@ import Link from "next/link";
 import * as React from "react";
 import { MouseEventHandler } from "react";
 import $navbar from "./Navbar.module.css";
-import Link from "next/link";
-import Image from "next/image";
-import {
-  PeopleOutline,
-  CoPresent,
-  Settings,
-  Logout,
-} from "@mui/icons-material";
-import { signOut } from "next-auth/react";
-import { useSession } from "next-auth/react";
 
-const NavBar = () => {
+interface NavItemProps {
+  href?: string;
+  icon: React.ReactNode;
+  text: string;
+  onClick?: MouseEventHandler<HTMLParagraphElement>;
+}
+
+export default function NavBar() {
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const desktop = useMediaQuery("(min-width: 992px)");
+
   const { status } = useSession();
 
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen);
+  };
+
+  const logo = (
+    <Link href="/">
+      <Image
+        src="/img/compass-logo-white.svg"
+        alt="logo"
+        className={$navbar.logo}
+        width={64}
+        height={64}
+        priority
+      />
+    </Link>
+  );
+
+  const ToolbarMenu = ({ name }: { name: React.ReactNode }) => (
+    <Toolbar className={$navbar.toolbar}>
+      {logo}
+      <IconButton
+        color="inherit"
+        aria-label="open drawer"
+        edge="start"
+        onClick={handleDrawerToggle}
+        sx={{ mr: 2, display: desktop ? "none" : "" }}
+      >
+        {name}
+      </IconButton>
+    </Toolbar>
+  );
+
+  const NavItem = ({ href, icon, text, onClick }: NavItemProps) => (
+    <ListItem disablePadding className={$navbar.linkItem}>
+      <Link href={href || ""} className={$navbar.link}>
+        {icon}
+        <p className={$navbar.linkTitle} onClick={onClick}>
+          {text}
+        </p>
+      </Link>
+    </ListItem>
+  );
+
+  const drawer = (
+    <div className={$navbar.sidebar}>
+      <List>
+        <NavItem href="/students" icon={<PeopleOutline />} text="Students" />
+        <NavItem href="/staff" icon={<CoPresent />} text="Staff" />
+        <NavItem href="/settings" icon={<Settings />} text="Settings" />
+        <NavItem
+          icon={<Logout />}
+          text="Logout"
+          onClick={() => signOut({ callbackUrl: "/" })}
+        />
+      </List>
+    </div>
+  );
+
   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
+        <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>
+
+          {/* Top nav for screen <= md size */}
+          <AppBar
+            position="fixed"
+            sx={{
+              display: desktop ? "none" : "block",
+            }}
+          >
+            <ToolbarMenu
+              name={<MenuIcon className={$navbar.burger} fontSize="large" />}
             />
-          </Link>
-          <br />
+          </AppBar>
 
-          <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: "/" })}
-              >
-                Logout
-              </p>
-            </Link>
-          </div>
-        </nav>
+          {/* 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>
+        </Box>
       )}
     </>
   );
-};
+}
diff --git a/src/components/navbar/Navbar.module.css b/src/components/navbar/Navbar.module.css
@@ -16,7 +16,6 @@
 .linkItem {
   padding: 1.25rem 0 1.25rem calc(45% - 1.5rem * 1.5);
 }
-
 .link {
   color: var(--on-primary);
   text-decoration: none;
@@ -34,7 +33,6 @@
 .burger {
   color: var(--primary-99);
 }
-
 @media (min-width: 992px) {
   .linkItem {
     padding-left: 9%;