Make links live

geneit_app/src/widgets/BaseFamilyRoute.tsx

@@ -1,7 +1,26 @@
-import { Outlet, useParams } from "react-router-dom";
-import { Family, FamilyApi } from "../api/FamilyApi";
+import {
+  mdiAccountMultiple,
+  mdiCog,
+  mdiCrowd,
+  mdiFamilyTree,
+  mdiHumanMaleFemale,
+} from "@mdi/js";
+import Icon from "@mdi/react";
+import HomeIcon from "@mui/icons-material/Home";
+import {
+  Box,
+  Divider,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+} from "@mui/material";
 import React from "react";
+import { Outlet, useLocation, useParams } from "react-router-dom";
+import { Family, FamilyApi } from "../api/FamilyApi";
 import { AsyncWidget } from "./AsyncWidget";
+import { RouterLink } from "./RouterLink";
 
 interface FamilyContext {
   family: Family;
@@ -39,10 +58,61 @@ export function BaseFamilyRoute(): React.ReactElement {
             reloadFamilyInfo: onReload,
           }}
         >
-          <div>
-            <p>base family route</p>
-            <Outlet />
-          </div>
+          <Box sx={{ display: "flex", flex: "2" }}>
+            <List component="nav">
+              <FamilyLink icon={<HomeIcon />} label="Accueil" uri="" />
+
+              <FamilyLink
+                icon={<Icon path={mdiCrowd} size={1} />}
+                label="Membres"
+                uri="members"
+              />
+
+              <FamilyLink
+                icon={<Icon path={mdiHumanMaleFemale} size={1} />}
+                label="Couples"
+                uri="couples"
+              />
+
+              <FamilyLink
+                icon={<Icon path={mdiFamilyTree} size={1} />}
+                label="Arbre"
+                uri="tree"
+              />
+
+              <Divider sx={{ my: 1 }} />
+              <ListSubheader component="div" inset>
+                Administration
+              </ListSubheader>
+
+              <FamilyLink
+                icon={<Icon path={mdiAccountMultiple} size={1} />}
+                label="Utilisateurs"
+                uri="users"
+              />
+
+              <FamilyLink
+                icon={<Icon path={mdiCog} size={1} />}
+                label="Paramètres"
+                uri="settings"
+              />
+            </List>
+
+            <Box
+              component="main"
+              sx={{
+                backgroundColor: (theme) =>
+                  theme.palette.mode === "light"
+                    ? theme.palette.grey[100]
+                    : theme.palette.grey[900],
+                flexGrow: 1,
+                overflow: "auto",
+                padding: "20px",
+              }}
+            >
+              <Outlet />
+            </Box>
+          </Box>
         </FamilyContextK.Provider>
       )}
     />
@@ -52,3 +122,22 @@ export function BaseFamilyRoute(): React.ReactElement {
 export function useFamily(): FamilyContext {
   return React.useContext(FamilyContextK)!;
 }
+
+function FamilyLink(p: {
+  icon: React.ReactElement;
+  uri: string;
+  label: string;
+}): React.ReactElement {
+  const family = useFamily();
+  const location = useLocation();
+  const link = family.family.URL(p.uri);
+
+  return (
+    <RouterLink to={link}>
+      <ListItemButton selected={link === location.pathname}>
+        <ListItemIcon>{p.icon}</ListItemIcon>
+        <ListItemText primary={p.label} />
+      </ListItemButton>
+    </RouterLink>
+  );
+}