Sidebar & React Page Routing

Created Sidebar to navigate between pages.

src/components/NavBar.css

@@ -1,5 +1,6 @@
 .bar {
     padding: 10px;
+    margin-bottom: 20px;
 }
 
 .logo {
@@ -7,6 +8,13 @@
     margin-right: 20px;
 }
 
+.nav-brand {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+}
+
 .nav-login-control {
     display: flex;
     margin-left: auto;

src/components/NavBar.js

@@ -1,14 +1,9 @@
-import { Toolbar, Typography } from "@material-ui/core";
 import React from "react";
-import "./NavBar.css"
+import { Menu, MenuItem } from '@mui/material';
+import { Toolbar, Typography, Button, IconButton, Link } from "@material-ui/core";
 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"
-
+import "./NavBar.css"
 
 export default function NavBar() {
     const [auth, setAuth] = React.useState(true);
@@ -34,12 +29,14 @@ export default function NavBar() {
 
     return (
         <Toolbar position="sticky" className="bar">
-            <img src={logo} className="logo"/>
-            <Typography 
-                className="nav-header"
-                variant="h5" >
-                BudgetBuddy
-            </Typography>
+            <Link href="/" class="nav-brand">
+                <img src={logo} className="logo"/>
+                <Typography 
+                    className="nav-header"
+                    variant="h5" >
+                    BudgetBuddy
+                </Typography>
+            </Link>
             <div className="nav-login-control">
                 {auth
                     ? // Logged In

src/components/SideNav.css

@@ -0,0 +1,10 @@
+.sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-bottom: 20px;
+}
+
+.sidebar-avatar {
+    justify-content: center;
+}

src/components/SideNav.js

@@ -0,0 +1,59 @@
+import {Sidebar, Menu, MenuItem} from 'react-pro-sidebar'
+import DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import ContactSupportOutlinedIcon from '@mui/icons-material/ContactSupportOutlined';
+import PrivacyTipOutlinedIcon from '@mui/icons-material/PrivacyTipOutlined';
+import SupervisedUserCircleOutlinedIcon from '@mui/icons-material/SupervisedUserCircleOutlined';
+import ContactPageOutlinedIcon from '@mui/icons-material/ContactPageOutlined';
+import { Avatar, Typography } from '@material-ui/core';
+import { Link } from '@material-ui/core';
+import './SideNav.css'
+
+
+export default function SideNav() {
+    return(
+        <Sidebar backgroundColor='transparent'>
+            <div className='sidebar-header'>
+                <div className='sidebar-avatar'>
+                    <Avatar />
+                </div>
+                <div className='sidebar-text'>
+                    <Typography variant='h6'>Welcome, Jacob</Typography>
+                    <Typography variant='subtitle2'> Your Budget Overiew</Typography>
+                </div>
+            </div>
+            <Menu>
+                <MenuItem
+                    component={<Link href="/dashboard" />}
+                    icon={<DashboardOutlinedIcon/>}>
+                    Dashboard
+                </MenuItem>
+                <MenuItem 
+                    component={<Link href="/settings" />}
+                    icon={<SettingsOutlinedIcon/>}>
+                    Settings
+                </MenuItem>
+                <MenuItem 
+                    component={<Link href="/support" />}
+                    icon={<ContactSupportOutlinedIcon/>}>
+                    Support
+                </MenuItem>
+                <MenuItem 
+                    component={<Link href="/privacy" />}
+                    icon={<PrivacyTipOutlinedIcon/>}>
+                    Privacy
+                </MenuItem>
+                <MenuItem
+                    component={<Link href="/about-us" />}
+                    icon={<SupervisedUserCircleOutlinedIcon/>}>
+                    About Us
+                </MenuItem>
+                <MenuItem 
+                    component={<Link href="/contact-us" />}
+                    icon={<ContactPageOutlinedIcon/>}>
+                    Contact Us
+                </MenuItem>
+            </Menu>
+        </Sidebar>
+    );
+}

src/components/VerticalAppbar.js

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