Add base web UI

moneymgr_web/src/widgets/MoneyNavList.tsx

@@ -0,0 +1,53 @@
+import { mdiApi, mdiHome } from "@mdi/js";
+import Icon from "@mdi/react";
+import {
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+import { useLocation } from "react-router-dom";
+import { useAuthInfo } from "./BaseAuthenticatedPage";
+import { RouterLink } from "./RouterLink";
+
+export function MoneyNavList(): React.ReactElement {
+  const user = useAuthInfo().info;
+  return (
+    <List
+      dense
+      component="nav"
+      sx={{
+        minWidth: "200px",
+        backgroundColor: "background.paper",
+      }}
+    >
+      <NavLink
+        label="Accueil"
+        uri="/"
+        icon={<Icon path={mdiHome} size={1} />}
+      />
+
+      <NavLink
+        label="API Tokens"
+        uri="/tokens"
+        icon={<Icon path={mdiApi} size={1} />}
+      />
+    </List>
+  );
+}
+
+function NavLink(p: {
+  icon: React.ReactElement;
+  uri: string;
+  label: string;
+}): React.ReactElement {
+  const location = useLocation();
+  return (
+    <RouterLink to={p.uri}>
+      <ListItemButton selected={p.uri === location.pathname}>
+        <ListItemIcon>{p.icon}</ListItemIcon>
+        <ListItemText primary={p.label} />
+      </ListItemButton>
+    </RouterLink>
+  );
+}