85 lines
2.0 KiB
TypeScript
85 lines
2.0 KiB
TypeScript
import { mdiDisc, mdiHome, mdiLanPending } from "@mdi/js";
|
|
import Icon from "@mdi/react";
|
|
import {
|
|
Box,
|
|
List,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemSecondaryAction,
|
|
ListItemText,
|
|
} from "@mui/material";
|
|
import { Outlet, useLocation } from "react-router-dom";
|
|
import { RouterLink } from "./RouterLink";
|
|
import { VirtWebAppBar } from "./VirtWebAppBar";
|
|
|
|
export function BaseAuthenticatedPage(): React.ReactElement {
|
|
return (
|
|
<Box
|
|
component="div"
|
|
sx={{
|
|
minHeight: "100vh",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
backgroundColor: (theme) => theme.palette.grey[900],
|
|
color: (theme) => theme.palette.grey[100],
|
|
}}
|
|
>
|
|
<VirtWebAppBar />
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flex: "2",
|
|
}}
|
|
>
|
|
<List
|
|
dense
|
|
component="nav"
|
|
sx={{
|
|
minWidth: "180px",
|
|
backgroundColor: "background.paper",
|
|
}}
|
|
>
|
|
<NavLink
|
|
label="Home"
|
|
uri="/"
|
|
icon={<Icon path={mdiHome} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="Networks"
|
|
uri="/networks"
|
|
icon={<Icon path={mdiLanPending} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="ISO files"
|
|
uri="/iso"
|
|
icon={<Icon path={mdiDisc} size={1} />}
|
|
/>
|
|
</List>
|
|
<div style={{ flex: 1 }}>
|
|
<Outlet />
|
|
</div>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function NavLink(p: {
|
|
icon: React.ReactElement;
|
|
uri: string;
|
|
label: string;
|
|
secondaryAction?: React.ReactElement;
|
|
}): React.ReactElement {
|
|
const location = useLocation();
|
|
return (
|
|
<RouterLink to={p.uri}>
|
|
<ListItemButton selected={p.uri === location.pathname}>
|
|
<ListItemIcon>{p.icon}</ListItemIcon>
|
|
<ListItemText primary={p.label} />
|
|
{p.secondaryAction && (
|
|
<ListItemSecondaryAction>{p.secondaryAction}</ListItemSecondaryAction>
|
|
)}
|
|
</ListItemButton>
|
|
</RouterLink>
|
|
);
|
|
}
|