Add side navigation

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