Add side navigation

virtweb_frontend/src/routes/NotFound.tsx

@@ -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>
+      <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="/">
-        <Button>Retour à l'accueil</Button>
+        <Button>Go back home</Button>
       </RouterLink>
     </div>
   );

virtweb_frontend/src/widgets/BaseAuthenticatedPage.tsx

@@ -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>
+  );
+}

virtweb_frontend/src/widgets/VirtWebAppBar.tsx

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