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/App.js

@@ -1,23 +1,9 @@
-import { createTheme, ThemeProvider } from '@material-ui/core';
+import { ThemeProvider, createGlobalStyle } from 'styled-components';
+import { theme } from './styles/theme.js'
 import NavBar from './components/NavBar'
+
 import './App.css';
 
-const theme = createTheme({
-  pallete: {
-    primary: {
-      
-    },
-    secondary: {
-
-    },
-  },
-  typography: {
-    fontFamily: [
-      'Roboto'
-    ],
-  }
-});
-
 function App() {
   return (
     <div className="App">

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
+    );
+}

src/styles/theme.js

@@ -0,0 +1,33 @@
+import { createTheme } from "@material-ui/core"
+
+export const theme = createTheme({
+    pallete: {
+      light: {
+        primary: {
+        
+        },
+        secondary: {
+    
+        },
+        background: {
+  
+        }
+      },
+      dark: {
+        primary: {
+        
+        },
+        secondary: {
+    
+        },
+        background: {
+          
+        }
+      }
+    },
+    typography: {
+      
+    },
+    overrides: {  
+    }
+  })