From 0f6407434530034c666a588637a02ded591a1ca6 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Sun, 19 Nov 2023 14:50:39 +0800
Subject: [PATCH] Added initial popup sidebar

---
 src/App.tsx                                  |  2 +-
 src/Components/Header/Header.tsx             | 34 +++++++++-
 src/Components/SidebarModal/SidebarModal.tsx | 65 ++++++++++++++++++++
 src/Pages/LandingPage/LandingPage.tsx        |  4 +-
 src/styles.tsx                               | 10 +--
 5 files changed, 104 insertions(+), 11 deletions(-)
 create mode 100644 src/Components/SidebarModal/SidebarModal.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 471ad7c..d25be6c 100644
--- a/src/App.tsx
+++ b/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
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 166208d..e71b017 100644
--- a/src/Components/Header/Header.tsx
+++ b/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>
   );
 }
diff --git a/src/Components/SidebarModal/SidebarModal.tsx b/src/Components/SidebarModal/SidebarModal.tsx
new file mode 100644
index 0000000..0a2d4ed
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/Pages/LandingPage/LandingPage.tsx b/src/Pages/LandingPage/LandingPage.tsx
index c68e5f0..eee369c 100644
--- a/src/Pages/LandingPage/LandingPage.tsx
+++ b/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",
diff --git a/src/styles.tsx b/src/styles.tsx
index 61d5b75..4a8f257 100644
--- a/src/styles.tsx
+++ b/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",