Add side navigation
This commit is contained in:
parent
d67f42abc5
commit
83ccd3a4b9
@ -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 été 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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -29,6 +29,8 @@ export function VirtWebAppBar(): React.ReactElement {
|
||||
|
||||
auth.setSignedIn(false);
|
||||
loadingMessage.hide();
|
||||
|
||||
window.location.href = "/";
|
||||
};
|
||||
|
||||
return (
|
||||
|
Loading…
Reference in New Issue
Block a user