Added sidebar

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={{
-            backgroundColor: "#9e8500",
-            width: 128,
-            height: 32,
-            border: "none",
-            padding: 8,
-            borderRadius: 16,
-          }}
+          style={styles.login_button}
         >
           <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>
+  );
+}