Sidebar & React Page Routing

Created Sidebar to navigate between pages.

src/Main.js

@@ -1,7 +1,55 @@
+import { ProSidebarProvider } from 'react-pro-sidebar'
 import NavBar from './components/NavBar'
+import SideNav from './components/SideNav'
+
+import Dashboard from './pages/Dashboard'
+import AboutUs from './pages/About-Us'
+import Privacy from './pages/Privacy'
+import Settings from './pages/Settings'
+import Support from './pages/Support'
+import ContactUs from './pages/Contact-Us'
+import Error from './pages/Error-Page'
+import './styles.css'
+
 
 export default function Main() {
+    let Layout
+    switch (window.location.pathname) {
+        case "/":
+        case "/dashboard":
+            Layout = Dashboard
+            break;
+        case "/about-us":
+            Layout = AboutUs
+            break;
+        case "/privacy":
+            Layout = Privacy
+            break;
+        case "/settings":
+            Layout = Settings
+            break;
+        case "/support":
+            Layout = Support
+            break;
+        case "/contact-us":
+            Layout = ContactUs
+            break;
+        default:
+            Layout = Error
+            break;
+    }
+
     return (
-        <NavBar />
+        <div>
+            <NavBar />
+            <ProSidebarProvider>
+                <div class="main-body">
+                    <SideNav />
+                    <div class="page-display">
+                        <Layout />
+                    </div>
+                </div>
+            </ProSidebarProvider>
+        </div>
     )
 }

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

src/pages/About-Us.jsx

@@ -0,0 +1,3 @@
+export default function AboutUs() {
+    return <h1>About Us</h1>
+}

src/pages/Contact-Us.jsx

@@ -0,0 +1,3 @@
+export default function ContactUs() {
+    return <h1>Contact Us</h1>
+}

src/pages/Dashboard.jsx

@@ -0,0 +1,3 @@
+ export default function Dashboard() {
+     return <h1>Dashboard</h1>
+ }

src/pages/Error-Page.jsx

@@ -0,0 +1,3 @@
+export default function Error() {
+    return <h1>Error</h1>
+}

src/pages/Privacy.jsx

@@ -0,0 +1,3 @@
+export default function Privacy() {
+    return <h1>Privacy</h1>
+}

src/pages/Settings.jsx

@@ -0,0 +1,3 @@
+export default function Settings() {
+    return <h1>Settings</h1>
+}

src/pages/Support.jsx

@@ -0,0 +1,3 @@
+export default function Support() {
+    return <h1>Support</h1>
+}

src/styles.css

@@ -5,9 +5,27 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.main-body {
+  display: flex;
+  width: 100vw;
+}
+
+.page-display {
+  margin: 0 40px;
+  border: 2px solid black;
+  border-radius: 20px;
+  padding: 20px 30px;
+  width: 100vw;
+}
+
+.page-display > * {
+  margin: 0;
+}