Added initial popup sidebar

src/App.tsx

@@ -30,8 +30,8 @@ export default function App() {
         <RouterProvider router={router} />
       </QueryClientProvider>
       <ToastContainer
+        position={"top-right"}
         autoClose={1500}
-        position="bottom-center"
         closeOnClick
         pauseOnHover
         draggable

src/Components/Header/Header.tsx

@@ -1,10 +1,15 @@
+import { useState } from "react";
 import styles, { colors } from "../../styles";
+import MenuIcon from "@mui/icons-material/Menu";
+import SidebarModal from "../SidebarModal/SidebarModal";
+import { Drawer } from "@mui/material";
 
 export interface props {
   label: React.ReactNode;
 }
 
 export default function Header(props: props) {
+  const [SidebarOpen, SetSidebarOpen] = useState(false);
   return (
     <div
       style={{
@@ -13,11 +18,34 @@ export default function Header(props: props) {
         zIndex: -1,
         backgroundColor: colors.header_color,
         display: "flex",
-        flexDirection: "column",
-        alignContent: "center",
+        flexDirection: "row",
       }}
     >
-      <p style={{ ...styles.text_light, ...styles.text_M }}>{props.label}</p>
+      <div
+        style={{
+          flex: 1,
+          alignSelf: "center",
+        }}
+      >
+        <MenuIcon
+          style={{
+            height: "64px",
+            width: "64px",
+            float: "left",
+            marginLeft: "8px",
+          }}
+          onClick={() => {
+            SetSidebarOpen(true);
+          }}
+        />
+      </div>
+      <p style={{ ...styles.text_light, ...styles.text_M, ...{ flex: 1 } }}>
+        {props.label}
+      </p>
+      <div style={{ flex: 1 }} />
+      <Drawer open={SidebarOpen} onClose={() => SetSidebarOpen(false)}>
+        <SidebarModal />
+      </Drawer>
     </div>
   );
 }

src/Components/SidebarModal/SidebarModal.tsx

@@ -0,0 +1,65 @@
+import styles, { colors } from "../../styles";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import HomeIcon from "@mui/icons-material/Home";
+export default function SidebarModal() {
+  return (
+    <div
+      style={{
+        width: "256px",
+        height: "100%",
+        padding: 16,
+        alignContent: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        backgroundColor: colors.header_color,
+      }}
+    >
+      <div style={styles.flex_row}>
+        <AccountCircleIcon
+          style={{
+            width: "48px",
+            height: "px",
+            color: "white",
+            marginRight: "4px",
+          }}
+        />
+        <p
+          style={{
+            ...styles.text_light,
+            ...styles.text_S,
+            ...{ alignSelf: "center" },
+          }}
+        >
+          Placeholder Name
+        </p>
+      </div>
+      <div
+        style={{
+          backgroundColor: "white",
+          marginTop: "16px",
+          width: "100%",
+          height: "2px",
+          marginBottom: 8,
+        }}
+      />
+      <div style={styles.flex_row}>
+        <HomeIcon
+          style={{
+            width: "64px",
+            height: "64px",
+            color: "white",
+            marginRight: "2px",
+          }}
+        />
+        <p
+          style={{
+            ...styles.text_light,
+            ...styles.text_M,
+          }}
+        >
+          Dashboard
+        </p>
+      </div>
+    </div>
+  );
+}

src/Pages/LandingPage/LandingPage.tsx

@@ -74,7 +74,7 @@ export default function LandingPage() {
                 modal
                 position={"top center"}
                 contentStyle={{
-                  width: "30vw",
+                  width: "512px",
                   borderRadius: 16,
                   borderColor: "grey",
                   borderStyle: "solid",
@@ -93,7 +93,7 @@ export default function LandingPage() {
                 modal
                 position={"top center"}
                 contentStyle={{
-                  width: "30vw",
+                  width: "512px",
                   borderRadius: 16,
                   borderColor: "grey",
                   borderStyle: "solid",

src/styles.tsx

@@ -42,19 +42,19 @@ const styles: { [key: string]: React.CSSProperties } = {
     fontWeight: "bold",
   },
   text_XL: {
-    fontSize: "clamp(2rem, 4rem, 8rem)",
+    fontSize: "clamp(2rem, 3rem, 8rem)",
   },
   text_L: {
-    fontSize: "clamp(1.5rem, 3rem, 6rem)",
+    fontSize: "clamp(1.5rem, 2rem, 6rem)",
   },
   text_M: {
-    fontSize: "clamp(1rem, 2rem, 4rem)",
+    fontSize: "clamp(1rem, 1rem, 4rem)",
   },
   text_S: {
-    fontSize: "clamp(0.5rem, 1rem, 2rem)",
+    fontSize: "clamp(0.6rem, 0.8rem, 1rem)",
   },
   text_XS: {
-    fontSize: "clamp(0.2rem, 0.5rem, 1rem)",
+    fontSize: "clamp(0.5rem, 0.6rem, 0.8rem)",
   },
   flex_row: {
     display: "flex",