Added sidebar

src/App.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Dashboard from "./Routes/Dashboard/Dashboard";
 import Header from "./Components/Header/Header";
+import Container from "./Components/Container/Container";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Store from "./Plugins/Redux/Store/Store";
 import { Provider } from "react-redux";
@@ -17,7 +18,9 @@ export default function App() {
     <React.StrictMode>
       <Provider store={Store}>
         <Header />
+        <Container>
           <RouterProvider router={router} />
+        </Container>
       </Provider>
     </React.StrictMode>
   );

src/components/Container/Container.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Sidebar from "../Sidebar/Sidebar";
+
+export interface props {
+  children: React.ReactNode;
+}
+
+export default function Container(props: props) {
+  return (
+    <div>
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        <div style={{ width: "85%", position: "fixed", left: "15%" }}>
+          {props.children}
+        </div>
+        <div style={{ width: "15%", position: "fixed" }}>
+          <Sidebar />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Header/Header.tsx

@@ -5,7 +5,7 @@ import styles from "../../styles";
 
 export default function Header() {
   return (
-    <div style={styles.header_container}>
+    <div style={styles.header_wrapper}>
       <div style={styles.header_left}>
         <AppLogo size={64} color="#6f9b78" />
         <p style={styles.logo_title}>Ivy</p>

src/components/Login/Login.tsx

@@ -33,14 +33,7 @@ export default function Login() {
           onClick={login}
           value="Login"
           variant="contained"
-          style={{
+          style={styles.login_button}
-            backgroundColor: "#9e8500",
-            width: 128,
-            height: 32,
-            border: "none",
-            padding: 8,
-            borderRadius: 16,
-          }}
         >
           <p style={styles.text}>Login</p>
         </Button>

src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "../../styles";
+import SidebarButton from "../SidebarButton/SidebarButton";
+export interface state {
+  minimized: {
+    value: boolean;
+    sidebar_width: string;
+    page_width: string;
+  };
+}
+export default function Sidebar() {
+  return (
+    <div style={styles.sidebar_wrapper}>
+      <SidebarButton onClick={() => console.log("WIP!")} name="Dashboard" />
+      <SidebarButton onClick={() => console.log("WIP!")} name="Products" />
+      <SidebarButton onClick={() => console.log("WIP!")} name="Inventory" />
+      <SidebarButton onClick={() => console.log("WIP!")} name="Logs" />
+    </div>
+  );
+}

src/components/SidebarButton/SidebarButton.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Button } from "@mui/material";
+import styles from "../../styles";
+
+export interface props {
+  name: string;
+  onClick: any;
+}
+export default function SidebarButton(props: props) {
+  return (
+    <div style={{ display: "flex", paddingBottom: 16 }}>
+      <Button
+        onClick={props.onClick}
+        variant="contained"
+        style={styles.sidebar_button}
+      >
+        <p style={styles.text}>{props.name}</p>
+      </Button>
+    </div>
+  );
+}

src/styles.tsx

@@ -22,12 +22,12 @@ const styles: { [key: string]: React.CSSProperties } = {
     fontSize: 26,
     fontWeight: "bold",
   },
-  header_container: {
+  header_wrapper: {
     display: "flex",
     flexDirection: "row",
     position: "sticky",
-    backgroundColor: "#3d4848",
     top: 0,
+    backgroundColor: "#3d4848",
     paddingRight: 32,
     paddingLeft: 32,
   },
@@ -37,6 +37,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     width: "50%",
     justifyContent: "left",
     alignItems: "center",
+    paddingLeft: 16,
   },
   header_right: {
     display: "flex",
@@ -45,6 +46,33 @@ const styles: { [key: string]: React.CSSProperties } = {
     justifyContent: "right",
     alignItems: "center",
   },
+  login_button: {
+    backgroundColor: "#9e8500",
+    width: 128,
+    height: 32,
+    border: "none",
+    padding: 8,
+    borderRadius: 16,
+  },
+  sidebar_button: {
+    backgroundColor: "#0b2322",
+    width: 256,
+    height: 64,
+    border: "none",
+    padding: 8,
+    borderTopLeftRadius: 32,
+    borderBottomLeftRadius: 32,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+  sidebar_wrapper: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100vh",
+    width: "100%",
+    backgroundColor: "#3d4848",
+    alignItems: "flex-end",
+  },
 };
 
 export default styles;