Add DrawerMenu on Navbar for small screens

JoyfulfrugalistaTechLaucher · Oct 15, 2024 · 3d386fe · 3d386fe
1 parent 7b361ad
commit 3d386fe
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 31 deletions.
diff --git a/src/app/components/Goal.tsx b/src/app/components/Goal.tsx
@@ -23,7 +23,7 @@ import { User } from '@/app/interface';
 interface ProfileGoalProps {
   user: User;
   show: boolean;
-  handleShow: (show: boolean) => void;
+  handleShow: (hs: boolean) => void;
 }
 
 interface CircProgressProps {
@@ -109,6 +109,7 @@ function easeInOutQuad(time: number): number {
   return time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time;
 }
 
+// TODO: make font responds to screen sizes more smoothly
 // For task page.  Mui does not ship a default semi-circular progress
 // bar so we make our own one.
 export function SemiCircGoalPanel({reached, prog, total, size}: CircProgressProps) {

diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
@@ -15,41 +15,83 @@ import {
   ListItemIcon,
   Menu,
   MenuItem,
-  Stack,
   Toolbar,
   Tooltip,
 } from '@mui/material';
 import { AppBarProps} from '@mui/material/AppBar';
 import {useMediaQuery, useTheme} from '@mui/material';
 import { styled } from '@mui/material/styles';
-import MenuIcon from '@mui/icons-material/Menu';
-import SmsIcon from '@mui/icons-material/Sms';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import BookIcon from '@mui/icons-material/Book';
+import HomeIcon from '@mui/icons-material/Home';
 import LogoutIcon from '@mui/icons-material/Logout';
+import MenuIcon from '@mui/icons-material/Menu';
 import NotificationsIcon from '@mui/icons-material/Notifications';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import SmsIcon from '@mui/icons-material/Sms';
+import TaskAltIcon from '@mui/icons-material/TaskAlt';
 import { signOut } from 'firebase/auth';
 import { useRouter } from 'next/navigation';
 import { auth } from '../config/firebaseConfig';
 import { useAuth } from '../context/AuthContext';
-import { User } from '../interface';
-import { DEFAULT_AVATAR, FB_URL } from '../constants';
 import { useUserData } from '../hooks/useUserData';
 
-// Hamburger Menu for small screens
-const appRoutes: string[] = [
-  'About',
-  'Ledger',
-  'Task',
-  'Stats',
-];
+const menuItems = ['about', 'ledger', 'task', 'stats', 'profile'];
+const menuIconsMap: { [key: string]: React.ElementType} = {
+  'about': HomeIcon,
+  'ledger': BookIcon,
+  'task': TaskAltIcon,
+  'stats': BarChartIcon,
+  'profile': AccountCircleIcon,
+};
 
-function HamburgerMenu() {
 
-  return (
-    <Stack spacing={1}>
+function DrawerMenu() {
+  const [open, setOpen] = useState<boolean>(false);
+  const router = useRouter();
+
+  const toggleDrawer = (open: boolean) => () => {
+    setOpen(open);
+  };
+
+  const handleItemClick = (item: string) => {
+    setOpen(false);
+    router.push('/'.concat(item));
+ };
+
+  const DrawerList = (
+    <Box sx={{ width: 180 }} role="presentation">
+      <List>
+        {menuItems.map((item) => (
+          <ListItem key={item} disablePadding>
+            <ListItemButton onClick={() => handleItemClick(item)}>
+              <ListItemIcon>
+                {React.createElement(menuIconsMap[item])}
+              </ListItemIcon>
+              <ListItemText primary={item} className="capitalize"/>
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
 
+  return (
+    <div>
+      <IconButton
+        size="large"
+        edge="start"
+        color="primary"
+        aria-label="menu"
+        onClick={toggleDrawer(true)}
+      >
+        <MenuIcon fontSize="inherit"/>
+      </IconButton>
 
-    </Stack>
+      <Drawer open={open} onClose={toggleDrawer(false)}>
+        {DrawerList}
+      </Drawer>
+    </div>
   );
 }
 
@@ -163,18 +205,7 @@ function Navbar() {
   return (
     <FlatAppBar component="nav" color="transparent" position="static">
       <Toolbar className="nav-bar">
-        {sm ? (
-          <IconButton
-            size="large"
-            edge="start"
-            color="primary"
-            aria-label="menu"
-            className="sm:hidden"
-            sx={{ mr: 2 }}
-          >
-            <MenuIcon fontSize="inherit"/>
-          </IconButton>
-        ) : (
+        {sm ? <DrawerMenu /> : (
           <NavButton
             variant="text"
             href="/"
@@ -184,7 +215,6 @@ function Navbar() {
           >
             Joyful Savings Jar
           </NavButton>
-
         )}
 
         <Box className="nav-routes">