vinvoor: add navbar selector

ZeusWPI · Aug 26, 2024 · be8caa4 · be8caa4
1 parent 0d82709
commit be8caa4
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 13 deletions.
diff --git a/vinvoor/src/navbar/NavBar.tsx b/vinvoor/src/navbar/NavBar.tsx
@@ -5,7 +5,7 @@ import {
   CreditCardMultipleOutline,
   CreditCardScanOutline,
 } from "mdi-material-ui";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { UserContext } from "../providers/UserProvider";
 import { NavBarLogo } from "./NavBarLogo";
@@ -30,20 +30,27 @@ const userMenuPages: PageIcon[] = [
 
 export const NavBar = () => {
   const { user } = useContext(UserContext);
+  const [selectedPage, setSelectedPage] = useState<string>("");
 
   const screenSize = {
     mobile: { xs: "flex", md: "none" },
     desktop: { xs: "none", md: "flex" },
   };
 
+  const handleSelectedPage = (page: string) => setSelectedPage(page);
+
   return (
     <AppBar position="static">
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           {/* Display either the ZeSS logo or a sandwich menu */}
 
           <Box sx={{ flexGrow: 1 }}>
-            <NavBarLogo sx={{ display: screenSize.desktop }} />
+            <NavBarLogo
+              sx={{ display: screenSize.desktop }}
+              selectedPage={selectedPage}
+              handleSelectedPage={handleSelectedPage}
+            />
 
             {user && (
               <NavBarSandwich
@@ -60,6 +67,8 @@ export const NavBar = () => {
               <NavBarPages
                 pageIcons={navBarPages}
                 sx={{ display: screenSize.desktop }}
+                selectedPage={selectedPage}
+                handleSelectedPage={handleSelectedPage}
               />
             )}
 
@@ -70,7 +79,11 @@ export const NavBar = () => {
 
           <Box sx={{ flexGrow: 0 }}>
             <DarkModeToggle />
-            <NavBarUserMenu pageIcons={userMenuPages} />
+            <NavBarUserMenu
+              pageIcons={userMenuPages}
+              selectedPage={selectedPage}
+              handleSelectedPage={handleSelectedPage}
+            />
           </Box>
         </Toolbar>
       </Container>

diff --git a/vinvoor/src/navbar/NavBarLogo.tsx b/vinvoor/src/navbar/NavBarLogo.tsx
@@ -6,6 +6,8 @@ import { ThemeContext } from "../providers/ThemeProvider";
 
 interface NavBarLogoProps {
   sx?: SxProps<Theme>;
+  selectedPage?: string;
+  handleSelectedPage?: (page: string) => void;
 }
 
 const CLICK_AMOUNT = 10;
@@ -14,9 +16,15 @@ const CLICK_TIME_MS = 1000;
 let pressedAmount = 0;
 let startTimePress = 0;
 
-export const NavBarLogo: FC<NavBarLogoProps> = ({ sx }) => {
+export const NavBarLogo: FC<NavBarLogoProps> = ({
+  sx,
+  selectedPage,
+  handleSelectedPage,
+}) => {
   const { setTheme } = useContext(ThemeContext);
   const handleClick = () => {
+    if (handleSelectedPage) handleSelectedPage("home");
+
     if (pressedAmount < CLICK_AMOUNT) {
       if (pressedAmount === 0) startTimePress = Date.now();
 
@@ -40,6 +48,12 @@ export const NavBarLogo: FC<NavBarLogoProps> = ({ sx }) => {
             ...sx,
             textTransform: "none",
             color: "secondary.contrastText",
+            borderTop: "2px solid transparent",
+            borderBottom: "2px solid transparent",
+            ...(selectedPage === "home" && {
+              borderBottom: theme =>
+                `2px solid ${theme.palette.secondary.main}`,
+            }),
           }}
         >
           <HexagonSlice6 sx={{ mr: ".3rem" }} />

diff --git a/vinvoor/src/navbar/NavBarPages.tsx b/vinvoor/src/navbar/NavBarPages.tsx
@@ -6,16 +6,31 @@ import { PageIcon } from "./NavBar";
 interface NavBarPagesProps {
   pageIcons: readonly PageIcon[];
   sx?: SxProps<Theme>;
+  selectedPage: string;
+  handleSelectedPage: (page: string) => void;
 }
 
-export const NavBarPages: FC<NavBarPagesProps> = ({ pageIcons, sx }) => {
+export const NavBarPages: FC<NavBarPagesProps> = ({
+  pageIcons,
+  sx,
+  selectedPage,
+  handleSelectedPage,
+}) => {
   return (
     <Box sx={{ ...sx }}>
       {pageIcons.map(({ page, icon }) => (
         <UnstyledLink key={page} to={page.toLowerCase()}>
           <Button
+            onClick={() => handleSelectedPage(page)}
             sx={{
               color: "secondary.contrastText",
+              borderTop: "2px solid transparent",
+              borderBottom: "2px solid transparent",
+              ...(selectedPage === page && {
+                borderBottom: theme =>
+                  `2px solid ${theme.palette.secondary.main}`,
+              }),
+              mr: 1,
             }}
           >
             {icon}

diff --git a/vinvoor/src/navbar/NavBarUserMenu.tsx b/vinvoor/src/navbar/NavBarUserMenu.tsx
@@ -1,21 +1,37 @@
-import { Button, Divider, Menu, MenuItem, Typography } from "@mui/material";
+import {
+  Button,
+  Divider,
+  Menu,
+  MenuItem,
+  Typography,
+  useMediaQuery,
+} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { Cow, ExitRun, ShieldAccountOutline } from "mdi-material-ui";
 import { FC, MouseEvent, useContext, useState } from "react";
 import { UnstyledLink } from "../components/UnstyledLink";
 import { UserContext } from "../providers/UserProvider";
-import { Optional } from "../types/general";
 import { Login } from "../user/Login";
 import { Logout } from "../user/Logout";
 import { PageIcon } from "./NavBar";
 
 interface NavBarUserMenuProps {
   pageIcons: readonly PageIcon[];
+  selectedPage: string;
+  handleSelectedPage: (page: string) => void;
 }
 
-export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ pageIcons }) => {
+export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({
+  pageIcons,
+  selectedPage,
+  handleSelectedPage,
+}) => {
   const { user } = useContext(UserContext);
-  const [anchorElUser, setAnchorElUser] =
-    useState<Optional<HTMLElement>>(undefined);
+  const theme = useTheme();
+  const isBrowserView = useMediaQuery(theme.breakpoints.up("sm"));
+  const [anchorElUser, setAnchorElUser] = useState<HTMLElement | undefined>(
+    undefined,
+  );
 
   const handleOpenUserMenu = (event: MouseEvent<HTMLElement>) => {
     setAnchorElUser(event.currentTarget);
@@ -34,6 +50,12 @@ export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ pageIcons }) => {
             sx={{
               textTransform: "none",
               color: "secondary.contrastText",
+              borderTop: "2px solid transparent",
+              borderBottom: "2px solid transparent",
+              ...(selectedPage === "user" && {
+                borderBottom: theme =>
+                  `2px solid ${theme.palette.secondary.main}`,
+              }),
             }}
           >
             <ShieldAccountOutline sx={{ mr: "3px" }} />
@@ -56,7 +78,12 @@ export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ pageIcons }) => {
           >
             {pageIcons.map(({ page, icon }) => (
               <UnstyledLink key={page} to={page.toLowerCase()}>
-                <MenuItem onClick={handleCloseUserMenu}>
+                <MenuItem
+                  onClick={() => {
+                    handleCloseUserMenu();
+                    if (isBrowserView) handleSelectedPage("user");
+                  }}
+                >
                   {icon}
                   <Typography>{page}</Typography>
                 </MenuItem>
@@ -66,7 +93,10 @@ export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ pageIcons }) => {
             {user.admin && (
               <UnstyledLink to="admin">
                 <MenuItem
-                  onClick={handleCloseUserMenu}
+                  onClick={() => {
+                    handleCloseUserMenu();
+                    if (isBrowserView) handleSelectedPage("user");
+                  }}
                   sx={{
                     paddingX: "0",
                     justifyContent: "center",

diff --git a/vinvoor/src/theme.ts b/vinvoor/src/theme.ts
@@ -3,7 +3,8 @@ import { createTheme, ThemeOptions } from "@mui/material";
 const baseTheme: ThemeOptions = {
   palette: {
     secondary: {
-      main: "#002379",
+      main: "#ffffff",
+      contrastText: "#ffffff",
     },
   },
   leaderboard: {