From 20deef5f5ad93516eaaabe580c4ca5f3f568ee35 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Fri, 24 May 2024 18:02:58 -0700
Subject: [PATCH] Refactored the Navbar with an avatar and a full bar to better
 match the sought after design.

---
 Client/src/Components/NavBar/index.jsx | 160 +++++++++++++++++++------
 1 file changed, 125 insertions(+), 35 deletions(-)

diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx
index c9f08a292..fa1a8bc15 100644
--- a/Client/src/Components/NavBar/index.jsx
+++ b/Client/src/Components/NavBar/index.jsx
@@ -1,48 +1,138 @@
 import { useState } from 'react';
-import './index.css';
-import Button from '@mui/material/Button';
+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 Avatar from '@mui/material/Avatar';
+import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
+import { useTheme } from '@mui/material/styles';
 
-const NavBar = () => {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
+const settings = ['Profile', 'Team', 'Invite Colleagues', 'Logout'];
 
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
+/**
+ * NavBar component
+ *
+ * A responsive navigation bar component with a user menu.
+ *
+ * @component
+ * @example
+ * return (
+ *   <NavBar />
+ * )
+ */
+function NavBar() {
+  const theme = useTheme();
+  const [anchorElUser, setAnchorElUser] = useState(null);
 
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
+  /**
+   * Handles opening the user menu.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event - The event triggered by clicking the user menu button.
+   */
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
 
-    return (
-        <div>
-            <Button
-                id="basic-button"
-                aria-controls={open ? 'basic-menu' : undefined}
-                aria-haspopup="true"
-                aria-expanded={open ? 'true' : undefined}
-                onClick={handleClick}
+  /**
+   * Handles closing the user menu.
+   */
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <AppBar position="static">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <Typography
+            variant="h6"
+            noWrap
+            component="a"
+            href="#"
+            sx={{
+              mr: 2,
+              display: { xs: 'none', md: 'flex' },
+              fontFamily: 'monospace',
+              fontWeight: theme.typography.fontWeightBold,
+              letterSpacing: theme.spacing(0.3),
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            UPTIME GENIE
+          </Typography>
+
+          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              color="inherit"
             >
-                Jackie Dawn
-            </Button>
+              <MenuIcon />
+            </IconButton>
+          </Box>
+
+          <Typography
+            variant="h5"
+            noWrap
+            component="a"
+            href="#"
+            sx={{
+              mr: 2,
+              display: { xs: 'flex', md: 'none' },
+              flexGrow: 1,
+              fontFamily: 'monospace',
+              fontWeight: theme.typography.fontWeightBold,
+              letterSpacing: theme.spacing(0.3),
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            UPTIME GENIE
+          </Typography>
+
+          <Box sx={{ flexGrow: 1 }} />
+
+          <Box sx={{ flexGrow: 0 }}>
+            <Tooltip title="Open settings">
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+              </IconButton>
+            </Tooltip>
             <Menu
-                id="basic-menu"
-                anchorEl={anchorEl}
-                open={open}
-                onClose={handleClose}
-                MenuListProps={{
-                    'aria-labelledby': 'basic-button',
-                }}
+              sx={{ mt: theme.spacing(5.5) }}
+              id="menu-appbar"
+              anchorEl={anchorElUser}
+              anchorOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              open={Boolean(anchorElUser)}
+              onClose={handleCloseUserMenu}
             >
-                <MenuItem onClick={handleClose}>Profile</MenuItem>
-                <MenuItem onClick={handleClose}>Team</MenuItem>
-                <MenuItem onClick={handleClose}>Invite Colleagues</MenuItem>
-                <MenuItem onClick={handleClose}>Log Out</MenuItem>
+              {settings.map((setting) => (
+                <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                  <Typography textAlign="center">{setting}</Typography>
+                </MenuItem>
+              ))}
             </Menu>
-        </div>
-    );
-};
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
 
 export default NavBar;