Merge pull request #56 from the-collab-lab/ap-feature-navbar-menu-icon

Icon Menu Positioned on App Bar for Mobile/Small-Screen View
the-collab-lab · May 28, 2023 · ad5ac2f · ad5ac2f
2 parents 160201d + ee837d0
commit ad5ac2f
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 37 deletions.
diff --git a/src/views/Layout.css b/src/views/Layout.css
@@ -60,3 +60,9 @@
  text-decoration-thickness: 0.22em;
  text-underline-offset: 0.1em;
 }
+
+.Menu-nav-link {
+ text-decoration: none;
+ color: #333;
+ font-size: 1.1em;
+}
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -1,15 +1,34 @@
 import { NavLink, Outlet } from 'react-router-dom';
+import { useState } from 'react';
 import {
  Container,
  Typography,
  Paper,
  AppBar,
  Toolbar,
  Breadcrumbs,
+ Box,
+ IconButton,
+ Menu,
+ MenuItem,
 } from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import BreakfastDiningIcon from '@mui/icons-material/BreakfastDining';
 import './Layout.css';
 
 export function Layout({ listToken }) {
+ //TO DO: Refactor NavBar into a separate component
+ //TO DO: Refactor styling of NavLinks using JS instead of CSS
+ const [anchorElNav, setAnchorElNav] = useState(null);
+
+ const handleOpenNavMenu = (event) => {
+ setAnchorElNav(event.currentTarget);
+ };
+
+ const handleCloseNavMenu = () => {
+ setAnchorElNav(null);
+ };
+
  return (
  <Paper sx={{ minHeight: '100dvh' }}>
  <Container
@@ -21,18 +40,21 @@ export function Layout({ listToken }) {
  minHeight: '100%',
  }}
  >
+ {/* App Bar begins here */}
  <Container maxWidth="xl" sx={{ p: '0' }} disableGutters>
+ {/* TODO: enable color on dark? */}
  <AppBar position="relative">
  <Container maxWidth="xl">
- <Toolbar sx={{ justifyContent: 'space-between' }}>
+ <Toolbar disableGutters>
+ {/* This is the title displayed on the left for medium to large screen sizes */}
+ <BreakfastDiningIcon sx={{ mr: 1 }} fontSize="large" />
  <Typography
- variant="h5"
- noWrap
+ variant="h3"
  component="a"
  href="/"
  sx={{
  mr: 2,
- display: { xs: 'none', md: 'flex' },
+ flexGrow: 1,
  fontFamily: 'monospace',
  fontWeight: 700,
  letterSpacing: '.3rem',
@@ -42,49 +64,83 @@ export function Layout({ listToken }) {
  >
  Smart Shopping List
  </Typography>
+
+ {/* This is the App Icon Menu */}
  {listToken ? (
- <div>
- {/* Consider using drawer or nav icon for mobile screen size */}
- <Breadcrumbs
- aria-label="breadcrumb"
- color="white"
- separator=""
+ <Box
+ sx={{ flexGrow: 0, display: { xs: 'flex', md: 'none' } }}
+ >
+ <IconButton
+ size="large"
+ aria-label="account of current user"
+ aria-controls="menu-appbar"
+ aria-haspopup="true"
+ onClick={handleOpenNavMenu}
+ color="inherit"
+ >
+ <MenuIcon />
+ </IconButton>
+
+ {/* This is the menu displayed after clicking on the icon */}
+ <Menu
+ id="menu-appbar"
+ anchorEl={anchorElNav}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'left',
+ }}
+ keepMounted
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'left',
+ }}
+ open={Boolean(anchorElNav)}
+ onClose={handleCloseNavMenu}
+ sx={{
+ display: { xs: 'block', md: 'none' },
+ }}
  >
- <NavLink to="/list" className="Nav-link">
- List
- </NavLink>
- <NavLink to="/add-item" className="Nav-link">
- Add Item
- </NavLink>
- </Breadcrumbs>
- </div>
+ <MenuItem onClick={handleCloseNavMenu}>
+ <NavLink to="/list" className="Menu-nav-link">
+ List
+ </NavLink>
+ </MenuItem>
+
+ <MenuItem onClick={handleCloseNavMenu}>
+ <NavLink to="/add-item" className="Menu-nav-link">
+ Add Item
+ </NavLink>
+ </MenuItem>
+ </Menu>
+ </Box>
  ) : (
- <div></div>
+ <Box></Box>
  )}
 
- <Typography
-  variant="h6"
- noWrap
- component="a"
- sx={{
- mr: 2,
- display: { xs: 'flex', md: 'none' },
-  justifyContent: 'right',
- flexGrow: 1,
- fontFamily: 'monospace',
- fontWeight: 700,
- letterSpacing: '.3rem',
- color: 'inherit',
- textDecoration: 'none',
- }}
- >
- Smart Shopping List
- </Typography>
+ {/* These are the Nav Links that display on right side for medium and large screens*/}
+ {listToken ? (
+ <Breadcrumbs
+  aria-label="breadcrumb"
+  color="white"
+ separator=""
+ sx={{ display: { xs: 'none', md: 'block' } }}
+ >
+ <NavLink to="/list" className="Nav-link">
+  List
+ </NavLink>
+ <NavLink to="/add-item" className="Nav-link">
+  Add Item
+ </NavLink>
+ </Breadcrumbs>
+ ) : (
+ <Breadcrumbs></Breadcrumbs>
+ )}
  </Toolbar>
  </Container>
  </AppBar>
  </Container>
 
+ {/* Main content area for each page */}
  <Container
  maxWidth="xl"
  sx={{