94 lines
2.2 KiB
TypeScript
94 lines
2.2 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|