Add side navigation

This commit is contained in:
Pierre HUBERT 2023-09-04 17:26:31 +02:00
parent d67f42abc5
commit 83ccd3a4b9
3 changed files with 72 additions and 4 deletions

View File

@ -4,10 +4,10 @@ import { RouterLink } from "../widgets/RouterLink";
export function NotFoundRoute(): React.ReactElement {
return (
<div style={{ textAlign: "center" }}>
<h1>Page non trouvée !</h1>
<p>La page que vous demandez n'a pas é trouvée !</p>
<h1>404 Not found</h1>
<p>The page you requested was not found!</p>
<RouterLink to="/">
<Button>Retour à l'accueil</Button>
<Button>Go back home</Button>
</RouterLink>
</div>
);

View File

@ -1,5 +1,17 @@
import { Box } from "@mui/material";
import {
Box,
List,
ListItemButton,
ListItemIcon,
ListItemSecondaryAction,
ListItemText,
ListSubheader,
} from "@mui/material";
import { VirtWebAppBar } from "./VirtWebAppBar";
import { RouterLink } from "./RouterLink";
import { Outlet, useLocation } from "react-router-dom";
import Icon from "@mdi/react";
import { mdiDisc, mdiHome, mdiLanPending } from "@mdi/js";
export function BaseAuthenticatedPage(): React.ReactElement {
return (
@ -14,6 +26,60 @@ export function BaseAuthenticatedPage(): React.ReactElement {
}}
>
<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>
);
}

View File

@ -29,6 +29,8 @@ export function VirtWebAppBar(): React.ReactElement {
auth.setSignedIn(false);
loadingMessage.hide();
window.location.href = "/";
};
return (