Sidebar & React Page Routing

Created Sidebar to navigate between pages.

package-lock.json

@@ -20,6 +20,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-pro-sidebar": "^1.0.0",
         "react-scripts": "5.0.1",
         "styled-components": "^5.3.9",
         "web-vitals": "^2.1.4"
@@ -6301,6 +6302,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -15190,6 +15196,21 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-pro-sidebar": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-pro-sidebar/-/react-pro-sidebar-1.0.0.tgz",
+      "integrity": "sha512-TAU3vHj0rYHSLWdZksiWte59dwh3rweaFY+dXri+y8mtlbQalxnNTG11k9wRCiaMa0IGPmIIbdY1E1yoHBUd/A==",
+      "dependencies": {
+        "@emotion/react": "^11.10.5",
+        "@emotion/styled": "^11.10.5",
+        "@popperjs/core": "^2.11.6",
+        "classnames": "^2.3.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-pro-sidebar": "^1.0.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.9",
     "web-vitals": "^2.1.4"

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"/>
+            <Link href="/" class="nav-brand">
-            <Typography 
+                <img src={logo} className="logo"/>
-                className="nav-header"
+                <Typography 
-                variant="h5" >
+                    className="nav-header"
-                BudgetBuddy
+                    variant="h5" >
-            </Typography>
+                    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;
+}

welcome/index.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>BudgetBuddy</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+  </head>
+  <body>
+    <div class="container">
+        <div class="navbar">
+            <a class="navbar-brand" href="#">
+                <img src="../src/assets/BudgetBuddyLogo.png" width="40">
+                BudgetBuddy
+            </a>
+            <button class="btn btn-outline-success">LOGIN OR SIGNUP</a>
+        </div>
+        <div class="jumbotron mt-4 mb-5">
+          <div class="row">
+            <div class="col-8">
+              <h1>Start Building Your Wealth</h1>
+              <p>BudgetBuddy’s top notch budgeting tools will help you start building wealth, no matter your income or debt.</p>
+              <button class="btn btn-outline-success">Get Started</button>
+            </div>
+            <div class="col-4">
+              <img class="w-100" src="./budgethero1.png"/>
+            </div>
+          </div>
+        </div>
+        <div class="container-fluid text-center">
+          <div class="row">
+            <div class="col-4">
+              <div class="container-fluid" style="max-width: 200px;">
+                <img src="./money1.png" class="w-100"/>
+                <h6>Track Your Spending</h6>
+                <p>Keep track of how much you spend on any number of spending categories.</p>
+              </div>
+            </div>
+            <div class="col-4">
+              <div class="container-fluid">
+                <img src="./money2.png" class="w-100" style="max-width: 200px;"/>
+                <h6>Plan Your Income</h6>
+                <p>Map out your income into savings categories to manage your money faster and easier than ever.</p>
+              </div>
+            </div>
+            <div class="col-4">
+              <div class="container-fluid">
+                <img src="./money3.png" class="w-100" style="max-width: 200px;"/>
+                <h6>See Your Wealth Grow</h6>
+                <p>Use BudgetBuddy’s widgets to visualize your wealth growing and debt shrinking.</p>
+              </div>
+            </div>
+          </div>
+          <button class="btn btn-outline-success">Get Started</button>
+        </div>
+    </container>
+  </body>
+</html>