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 {
|
export function NotFoundRoute(): React.ReactElement {
|
||||||
return (
|
return (
|
||||||
<div style={{ textAlign: "center" }}>
|
<div style={{ textAlign: "center" }}>
|
||||||
<h1>Page non trouvée !</h1>
|
<h1>404 Not found</h1>
|
||||||
<p>La page que vous demandez n'a pas été trouvée !</p>
|
<p>The page you requested was not found!</p>
|
||||||
<RouterLink to="/">
|
<RouterLink to="/">
|
||||||
<Button>Retour à l'accueil</Button>
|
<Button>Go back home</Button>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</div>
|
</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 { 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 {
|
export function BaseAuthenticatedPage(): React.ReactElement {
|
||||||
return (
|
return (
|
||||||
@ -14,6 +26,60 @@ export function BaseAuthenticatedPage(): React.ReactElement {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<VirtWebAppBar />
|
<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>
|
</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);
|
auth.setSignedIn(false);
|
||||||
loadingMessage.hide();
|
loadingMessage.hide();
|
||||||
|
|
||||||
|
window.location.href = "/";
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
Loading…
Reference in New Issue
Block a user