[Draft] Refactor frontend

applications/webapp/src/Pages/Home/ContextProvider/drawerProvider.tsx

@@ -0,0 +1,37 @@
+/**
+ * Humanitech Supply Trail
+ *
+ * Copyright (c) Humanitech, Peter Rogov and Contributors
+ *
+ * Website: https://humanitech.net
+ * Repository: https://github.com/humanitech-net/supply-trail
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { ReactNode, createContext, useState, useMemo } from "react";
+
+interface DrawerContextProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+interface DrawerProviderProps {
+  children: ReactNode;
+}
+
+export const DrawerContext = createContext<DrawerContextProps>({
+  open: false,
+  setOpen: () => {},
+});
+
+export const DrawerProvider: React.FC<DrawerProviderProps> = ({ children }) => {
+  const [open, setOpen] = useState(false);
+
+  const props = useMemo(() => ({ open, setOpen }), [open, setOpen]);
+
+  return (
+    <DrawerContext.Provider value={props}>{children}</DrawerContext.Provider>
+  );
+};

applications/webapp/src/Pages/Home/LeftDrawer/Components/drawerHeader.tsx

@@ -0,0 +1,49 @@
+/**
+ * Humanitech Supply Trail
+ *
+ * Copyright (c) Humanitech, Peter Rogov and Contributors
+ *
+ * Website: https://humanitech.net
+ * Repository: https://github.com/humanitech-net/supply-trail
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useContext } from "react";
+import { IconButton, styled } from "@mui/material";
+
+import MenuIcon from "@mui/icons-material/Menu";
+import { DrawerContext } from "../../ContextProvider/drawerProvider";
+
+export default function DrawerHeader() {
+  const { open, setOpen } = useContext(DrawerContext);
+
+  const closeDrawer = React.useCallback(() => {
+    setOpen(false);
+  }, [open]);
+
+  const Header = styled("div")(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(0, 1),
+    ...theme.mixins.toolbar,
+    justifyContent: "flex-start",
+    paddingLeft: 22,
+    backgroundColor: "#011C27",
+  }));
+
+  return (
+    <Header>
+      <IconButton
+        color="inherit"
+        aria-label="close drawer"
+        onClick={closeDrawer}
+        edge="start"
+        sx={{ color: "white" }}
+      >
+        <MenuIcon />
+      </IconButton>
+    </Header>
+  );
+}

applications/webapp/src/Pages/Home/LeftDrawer/Components/drawerMenu.tsx

@@ -0,0 +1,41 @@
+/**
+ * Humanitech Supply Trail
+ *
+ * Copyright (c) Humanitech, Peter Rogov and Contributors
+ *
+ * Website: https://humanitech.net
+ * Repository: https://github.com/humanitech-net/supply-trail
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import { List, ListItem, ListItemButton, ListItemText } from "@mui/material";
+import { drawerMenu } from "../util/constants";
+
+export default function DrawerMenu() {
+  return (
+    <List
+      sx={{
+        backgroundColor: "#011C27",
+        color: "white",
+      }}
+    >
+      {drawerMenu.map((text) => (
+        <ListItem key={text} disablePadding>
+          <ListItemButton
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <ListItemText primary={text} />
+          </ListItemButton>
+        </ListItem>
+      ))}
+    </List>
+  );
+}