fix docker, add base routing, header + drawer

frontend/src/header/Header.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Box,
+  useTheme,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import { useNavigate, useLocation, To } from "react-router-dom";
+
+const pages = [{ name: "Home", path: "/" }];
+
+export default function Header() {
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const toggleDrawer = (open: boolean) => () => setDrawerOpen(open);
+
+  const handleNavigate = (path: To) => {
+    navigate(path);
+    setDrawerOpen(false);
+  };
+
+  const drawerList = (
+    <Box
+      sx={{
+        width: 250,
+        height: "100%",
+        bgcolor: theme.palette.background.default,
+        color: theme.palette.text.primary,
+      }}
+      role="presentation"
+      onKeyDown={toggleDrawer(false)}
+    >
+      <Typography
+        variant="h6"
+        sx={{
+          textAlign: "center",
+          my: 2,
+          fontWeight: "bold",
+          color: theme.palette.primary.main,
+        }}
+      >
+        MitM Webserver
+      </Typography>
+      <List>
+        {pages.map(({ name, path }) => (
+          <ListItem key={name} disablePadding>
+            <ListItemButton
+              onClick={() => handleNavigate(path)}
+              selected={location.pathname === path}
+            >
+              <ListItemText primary={name} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+
+  return (
+    <>
+      <AppBar position="fixed" color="primary" elevation={2}>
+        <Toolbar>
+          <IconButton color="inherit" edge="start" onClick={toggleDrawer(true)}>
+            <MenuIcon />
+          </IconButton>
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{ flexGrow: 1, fontWeight: "bold", cursor: "pointer" }}
+            onClick={() => handleNavigate("/")}
+          >
+            MitM Webserver
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Toolbar /> {/* spacing */}
+      <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
+        {drawerList}
+      </Drawer>
+    </>
+  );
+}