Merge pull request #47 from the-collab-lab/gl-km-mui-nav-bar

Issue #19 | Recreate Nav bar using MUI
the-collab-lab · Mar 29, 2024 · 5f44875 · 5f44875
2 parents 696d40b + 0c994bf
commit 5f44875
Show file tree

Hide file tree

Showing 5 changed files with 249 additions and 28 deletions.
diff --git a/src/components/ListItem.css b/src/components/ListItem.css
@@ -1,3 +1,4 @@
+/* list item css */
 .ListItem {
 	align-items: baseline;
 	display: flex;

diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -0,0 +1,235 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
+import Container from '@mui/material/Container';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import { NavLink } from 'react-router-dom';
+import SvgIcon from '@mui/material/SvgIcon';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import RestoreIcon from '@mui/icons-material/Restore';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import ArchiveIcon from '@mui/icons-material/Archive';
+import Paper from '@mui/material/Paper';
+
+export function NavBar() {
+	const { user } = useAuth();
+	const [anchorElNav, setAnchorElNav] = useState(null);
+
+	const handleCloseNavMenu = () => {
+		setAnchorElNav(null);
+	};
+
+	const [value, setValue] = React.useState('/');
+
+	return (
+		<AppBar position="static">
+			<Container maxWidth="xl">
+				<Toolbar variant="dense" disableGutters>
+					{/*Logo and app name for medium or larger screens*/}
+					<SvgIcon
+						sx={{
+							fontSize: '20px',
+							display: { xs: 'none', md: 'flex' },
+							mr: 1,
+						}}
+					>
+						<svg
+							height="200px"
+							width="200px"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 290.87 290.87"
+							xmlSpace="preserve"
+							fill="#000"
+							transform="scale(-1 1)"
+							stroke="#000"
+							strokeWidth={0.00290873}
+						>
+							<g fill="#010002">
+								<path d="M44.268 139.532L44.268 79.35 44.268 41.049 93.507 90.294z" />
+								<path d="M0 73.384L32.334 41.049 32.334 73.384z" />
+								<path d="M149.583 249.824L113.508 213.748 149.583 181.843z" />
+								<path d="M103.066 202.799L47.216 153.823 160.968 48.77 290.873 48.77z" />
+							</g>
+						</svg>
+					</SvgIcon>
+					<Typography
+						variant="h6"
+						noWrap
+						component="a"
+						href="#app-bar-with-responsive-menu"
+						sx={{
+							mr: 2,
+							display: { xs: 'none', md: 'flex' },
+							fontFamily: 'monospace',
+							fontWeight: 700,
+							letterSpacing: '.3rem',
+							color: 'inherit',
+							textDecoration: 'none',
+						}}
+					>
+						SwiftShop
+					</Typography>
+					{/* nav links for larger screens */}
+					<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+						<NavLink to="/" className="Nav-link">
+							<Button
+								onClick={handleCloseNavMenu}
+								sx={{ my: 2, color: 'white', display: 'block' }}
+							>
+								Home
+							</Button>
+						</NavLink>
+						<NavLink to="/list" className="Nav-link">
+							<Button
+								onClick={handleCloseNavMenu}
+								sx={{ my: 2, color: 'white', display: 'block' }}
+							>
+								List
+							</Button>
+						</NavLink>
+						<NavLink to="/manage-list" className="Nav-link">
+							<Button
+								onClick={handleCloseNavMenu}
+								sx={{ my: 2, color: 'white', display: 'block' }}
+							>
+								Manage List
+							</Button>
+						</NavLink>
+					</Box>
+
+					{/* app logo for small screens */}
+					<SvgIcon
+						sx={{
+							fontSize: '20px',
+							display: { xs: 'flex', md: 'none' },
+							mr: 1,
+						}}
+					>
+						<svg
+							height="200px"
+							width="200px"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 290.87 290.87"
+							xmlSpace="preserve"
+							fill="#000"
+							transform="scale(-1 1)"
+							stroke="#000"
+							strokeWidth={0.00290873}
+						>
+							<g fill="#010002">
+								<path d="M44.268 139.532L44.268 79.35 44.268 41.049 93.507 90.294z" />
+								<path d="M0 73.384L32.334 41.049 32.334 73.384z" />
+								<path d="M149.583 249.824L113.508 213.748 149.583 181.843z" />
+								<path d="M103.066 202.799L47.216 153.823 160.968 48.77 290.873 48.77z" />
+							</g>
+						</svg>
+					</SvgIcon>
+					<Typography
+						variant="h5"
+						noWrap
+						component="a"
+						href="#app-bar-with-responsive-menu"
+						sx={{
+							mr: 2,
+							display: { xs: 'flex', md: 'none' },
+							flexGrow: 1,
+							fontFamily: 'monospace',
+							fontWeight: 700,
+							letterSpacing: '.3rem',
+							color: 'inherit',
+							textDecoration: 'none',
+						}}
+					>
+						SwiftShop
+					</Typography>
+					<Box
+						sx={{
+							flexGrow: 1,
+							flexDirection: 'row',
+							display: { xs: 'flex', md: 'none' },
+							justifyContent: 'end',
+						}}
+					>
+						{!!user ? (
+							<Typography>
+								Signed in as {user.displayName} <SignOutButton />
+							</Typography>
+						) : (
+							<SignInButton />
+						)}
+					</Box>
+					{/* nav links for smaller screens */}
+
+					{/* username and signin/signout button for larger screens */}
+					<Box
+						sx={{
+							flexGrow: 1,
+							flexDirection: 'row',
+							display: { xs: 'none', md: 'flex' },
+							justifyContent: 'end',
+						}}
+					>
+						{!!user ? (
+							<Typography>
+								Signed in as {user.displayName} <SignOutButton />
+							</Typography>
+						) : (
+							<SignInButton />
+						)}
+					</Box>
+				</Toolbar>
+
+				{/* username and signin/signout button for smaller screens */}
+			</Container>
+			<Paper
+				sx={{
+					display: { xs: 'flex', md: 'none' },
+					justifyContent: 'space-around',
+					position: 'fixed',
+					bottom: 0,
+					left: 0,
+					right: 0,
+				}}
+				elevation={3}
+			>
+				<BottomNavigation
+					showLabels
+					value={value}
+					onChange={(event, newValue) => {
+						setValue(newValue);
+					}}
+					sx={{ width: '100%' }}
+				>
+					<BottomNavigationAction
+						label="Home"
+						icon={<RestoreIcon />}
+						component={NavLink}
+						to="/"
+					/>
+					<BottomNavigationAction
+						label="List"
+						icon={<FavoriteIcon />}
+						component={NavLink}
+						to="/list"
+					/>
+					<BottomNavigationAction
+						label="About"
+						icon={<ArchiveIcon />}
+						component={NavLink}
+						to="/manage-list"
+					/>
+				</BottomNavigation>
+			</Paper>
+		</AppBar>
+	);
+}
+// end of nav
diff --git a/src/components/index.js b/src/components/index.js
@@ -1,2 +1,3 @@
 export * from './ListItem';
 export * from './SingleList';
+export * from './NavBar';
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -1,8 +1,9 @@
 import { Outlet, NavLink } from 'react-router-dom';
 
 import './Layout.css';
-import { auth } from '../api/config.js';
-import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx';
+// import { auth } from '../api/config.js';
+// import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx';
+import { NavBar } from '../components';
 
 /**
  * TODO: The links defined in this file don't work!
@@ -13,38 +14,20 @@ import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx';
  */
 
 export function Layout() {
-	const { user } = useAuth();
+	// const { user } = useAuth();
 
 	return (
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
-					<h1>Smart shopping list</h1>
-					{!!user ? (
-						<span>
-							<p>Signed in as {user.displayName}</p>
-							<SignOutButton />
-						</span>
-					) : (
-						<SignInButton />
-					)}
+					<h1>SwiftShop</h1>
+
+					<NavBar />
+
+					<main className="Layout-main">
+						<Outlet />
+					</main>
 				</header>
-				<main className="Layout-main">
-					<Outlet />
-				</main>
-				<nav className="Nav">
-					<div className="Nav-container">
-						<NavLink to="/" className="Nav-link">
-							Home
-						</NavLink>
-						<NavLink to="/list" className="Nav-link">
-							List
-						</NavLink>
-						<NavLink to="/manage-list" className="Nav-link">
-							Manage List
-						</NavLink>
-					</div>
-				</nav>
 			</div>
 		</>
 	);

diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -224,6 +224,7 @@ export function List({ data, listPath }) {
 		);
 	};
 
+	// shown when list is empty
 	const renderAddFirstItemCTA = () => {
 		return (
 			<div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -224,6 +224,7 @@ export function List({ data, listPath }) { @@
     		);
     	};
+    	// shown when list is empty
     	const renderAddFirstItemCTA = () => {
     		return (
     			<div>
@@ Expand Down @@