Navbar Login Logic

Added the logic for showing either "Login or Sign Up"  or an Account Icon with a dropdown menu at the top of the navbar.

src/components/NavBar.css

@@ -7,6 +7,7 @@
     margin-right: 20px;
 }
 
-.nav-header {
-    font-weight: bold;
+.nav-login-control {
+    display: flex;
+    margin-left: auto;
 }

src/components/NavBar.js

@@ -1,19 +1,80 @@
-import { makeStyles, Toolbar, Typography } from "@material-ui/core";
-import { mergeClasses } from "@material-ui/styles";
+import { Toolbar, Typography } from "@material-ui/core";
 import React from "react";
 import "./NavBar.css"
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import IconButton from "@material-ui/core/IconButton";
+import MenuItem from '@mui/material/MenuItem';
+import Menu from '@mui/material/Menu';
+import Button from "@material-ui/core/Button";
 
 import logo from "../assets/BudgetBuddyLogo.png"
 
-function NavBar() {
+
+export default function NavBar() {
+    const [auth, setAuth] = React.useState(true);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+
+    const handleLogin = () => {
+        setAuth(true);
+        handleClose();
+    }
+    
+    const handleLogout= () => {
+        setAuth(false);
+        handleClose();
+    }
+
+    const handleMenu = (event) => {
+      setAnchorEl(event.currentTarget);
+    };
+  
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
     return (
         <Toolbar position="sticky" className="bar">
             <img src={logo} className="logo"/>
-            <Typography variant="h6" className="nav-header">
+            <Typography 
+                className="nav-header"
+                variant="h5" >
                 BudgetBuddy
             </Typography>
+            <div className="nav-login-control">
+                {auth
+                    ? // Logged In
+                        <div>
+                            <IconButton
+                                size="large"
+                                aria-label="account of current user"
+                                aria-controls="menu-appbar"
+                                aria-haspopup="true"
+                                onClick={handleMenu}
+                                color="inherit" >
+                                <AccountCircle />
+                            </IconButton>
+                            <Menu
+                                id="menu-appbar"
+                                anchorEl={anchorEl}
+                                anchorOrigin={{
+                                    vertical: 'top',
+                                    horizontal: 'right',
+                                }}
+                                keepMounted
+                                transformOrigin={{
+                                    vertical: 'top',
+                                    horizontal: 'right',
+                                }}
+                                open={Boolean(anchorEl)}
+                                onClose={handleClose} >
+                                <MenuItem onClick={handleClose}>Profile</MenuItem>
+                                <MenuItem onClick={handleClose}>My account</MenuItem>
+                                <MenuItem onClick={handleLogout}>Log Out</MenuItem>
+                            </Menu>
+                        </div>
+                    : <Button onClick={handleLogin}>Login or Sign Up</Button>  // Logged Out
+                }
+            </div>
         </Toolbar>
     )
-}
-
-export default NavBar
+}

src/components/VerticalAppbar.js

@@ -0,0 +1,7 @@
+import { Toolbar } from "@material-ui/core";
+
+function VerticalAppBar() {
+    return(
+        Toolbar
+    );
+}