114 lines
2.7 KiB
TypeScript
114 lines
2.7 KiB
TypeScript
import {
|
|
mdiApi,
|
|
mdiBoxShadow,
|
|
mdiDisc,
|
|
mdiHome,
|
|
mdiInformation,
|
|
mdiLan,
|
|
mdiSecurityNetwork,
|
|
} 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 { isDebug } from "../utils/DebugUtils";
|
|
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: "200px",
|
|
backgroundColor: "background.paper",
|
|
}}
|
|
>
|
|
<NavLink
|
|
label="Home"
|
|
uri="/"
|
|
icon={<Icon path={mdiHome} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="Virtual Machines"
|
|
uri="/vms"
|
|
icon={<Icon path={mdiBoxShadow} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="Networks"
|
|
uri="/net"
|
|
icon={<Icon path={mdiLan} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="Network filters"
|
|
uri="/nwfilter"
|
|
icon={<Icon path={mdiSecurityNetwork} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="ISO files"
|
|
uri="/iso"
|
|
icon={<Icon path={mdiDisc} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="API tokens"
|
|
uri="/tokens"
|
|
icon={<Icon path={mdiApi} size={1} />}
|
|
/>
|
|
<NavLink
|
|
label="Sysinfo"
|
|
uri="/sysinfo"
|
|
icon={<Icon path={mdiInformation} 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>
|
|
);
|
|
}
|