Finished updating Sidebar to match Figma

Author: mfan88

pecan/Frontend/pecan-live-dashboard/src/App.tsx

@@ -4,25 +4,24 @@ import Sidebar from "./components/Sidebar";
 import Hamburger from "./components/HamburgerMenu";
 import { Outlet } from "react-router";
 
-
 function App() {
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
 
   return (
-    <>
-      <div className="h-screen flex flex-row ">
-        <div className="h-screen w-[60px]">
-          <Hamburger trigger={() => setIsSidebarOpen(true)} />
-          <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
-        </div>
-
-        {/* Main content area, Outlet element is needed to display the rendered child pages received from the routes */}
-        <main id="main-content" className=" w-100 h-full p-4">
-          <Outlet />
-        </main>
+    <div className="h-screen flex flex-row ">
+      <div className="h-screen w-[60px]">
+        <Hamburger trigger={() => setIsSidebarOpen(true)} />
+        <Sidebar
+          isOpen={isSidebarOpen}
+          onClose={() => setIsSidebarOpen(false)}
+        />
       </div>
-      
-    </>
+
+      {/* Main content area, Outlet element is needed to display the rendered child pages received from the routes */}
+      <main id="main-content" className=" w-100 h-full p-4">
+        <Outlet />
+      </main>
+    </div>
   );
 }
 

pecan/Frontend/pecan-live-dashboard/src/components/Sidebar.tsx

@@ -34,7 +34,7 @@ function Sidebar({ isOpen, onClose }: Readonly<InputProps>) {
             <NavLink onClick={onClose} to={"/"}>
               <img className="my-10 cursor-pointer" src={banner} alt="banner" />
             </NavLink>
-            {/* Could create a global function to close the sidebar and use it in the component rather than passing it in every time */}
+            {/* Could create a global function to close the sidebar and use it in the component rather than passing onClose in every time */}
             <ul className="p-0">
               <SidebarOption
                 option="Dashboard"
@@ -46,12 +46,17 @@ function Sidebar({ isOpen, onClose }: Readonly<InputProps>) {
                 path="/accumulator"
                 onClose={onClose}
               />
+              <SidebarOption
+                option="Chargecart"
+                path="/chargecart"
+                onClose={onClose}
+              />
             </ul>
           </div>
           <footer className="font-footer flex flex-col space-y-8 mb-10">
             {/* Should go to /account*/}
             <NavLink
-              to={"/"}
+              to={"/account"}
               className="!no-underline text-md flex flex-row space-x-6 ml-4"
               onClick={onClose}
             >
@@ -60,7 +65,7 @@ function Sidebar({ isOpen, onClose }: Readonly<InputProps>) {
             </NavLink>
             {/* Should go to /settings*/}
             <NavLink
-              to={"/"}
+              to={"/settings"}
               className="!no-underline flex flex-row space-x-6 text-md ml-4"
               onClick={onClose}
             >

pecan/Frontend/pecan-live-dashboard/src/pages/ChargeCart.tsx

@@ -0,0 +1,5 @@
+function ChargeCart() {
+  return <div></div>;
+}
+
+export default ChargeCart;

pecan/Frontend/pecan-live-dashboard/src/routes.tsx

@@ -2,14 +2,21 @@ import { createBrowserRouter } from "react-router";
 import App from "./App";
 import Dashboard from "./pages/Dashboard";
 import Accumulator from "./pages/Accumulator";
+import Account from "./pages/Account";
+import Settings from "./pages/Settings";
+import ChargeCart from "./pages/ChargeCart";
 
 export const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
+    //Pages are separate components, to add a route that is related to '/' just add a child, path is the relative path
     children: [
       { path: "dashboard", element: <Dashboard /> },
       { path: "accumulator", element: <Accumulator /> },
+      { path: "account", element: <Account /> },
+      { path: "settings", element: <Settings /> },
+      { path: "chargecart", element: <ChargeCart /> },
     ],
   },
 ]);