Added initial popup sidebar

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>
   );
 }