Group the sidebar into collapsible submenus

The flat 22-item menu becomes 7 entries: Dashboard and Secrets as plain
links, and five groups.
- Infrastructure: Servers, Proxmox, Synology, Docker, Tailscale
- Network: DNS, Domains, IP Addresses, Consistency
- Automation: Semaphore, Gitea
- Operations: Maintenance, Generator
- Administration: Integrations, Users, Sessions, Audit Log, Diagnostic
  Log, Settings
Privacy moves to the sidebar footer beside the theme toggle and sign-out,
since it's about the person rather than the homelab.

Behaviour:
- Groups open on demand. The group holding the current page is always
  open (deep routes count: /servers/7 keeps Servers active), and its
  header stays emphasised even if you close it. Which groups you leave
  open is remembered in the browser, and the menu still works if storage
  is blocked.
- Role handling: pages a role can't use are dropped, an emptied group
  disappears, and a group reduced to a single page is drawn as that
  page's own link. A viewer therefore sees a plain Integrations link
  where an admin sees Administration, and an operator sees Administration
  with Integrations and Audit Log.
- Toggling a group on mobile keeps the menu open; choosing a page closes
  it, as before.
- Group headers are real buttons with aria-expanded.

Front end only: one component, plus a small CSS rule tightening submenu
rows so several open groups still fit on one screen. Routes, permissions
and backend are unchanged.

Verified in a browser with the real shell as admin, operator and viewer:
structure per role, open/close and aria state, active highlighting on
direct and deep routes, auto-open of the current page's group, state
surviving a reload, and the mobile toggler behaviour. Not done: the
attention dots on closed groups (deliberately held for a later step).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

README.md

@@ -15,7 +15,7 @@ Authentik (OIDC), with local admin/operator/viewer roles.
 
 All modules from the original plan are built:
 
-- Monorepo scaffold, Tabler-themed app shell/navigation
+- Monorepo scaffold, Tabler-themed app shell with a grouped sidebar (Infrastructure, Network, Automation, Operations, Administration; groups open on demand, the one holding the current page is always open, and what you leave open is remembered)
 - Authentik OIDC login, roles (first user to sign in becomes admin), audit log
 - **Dashboard** — an overview of every system this app tracks, all sharing
   one widget-card design (label + status badge, a small stat row, then its

web/src/layout/AppShell.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, type ReactNode } from "react";
-import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink, useLocation } from "react-router-dom";
 import {
   IconLayoutDashboard,
   IconServer2,
@@ -26,46 +26,127 @@ import {
   IconWorldWww,
   IconListCheck,
   IconShieldLock,
+  IconRefresh,
 } from "@tabler/icons-react";
 import { api, type CurrentUser, type MaintenanceWindow } from "../api/client";
 import { formatRemaining } from "../utils/duration";
 import { getTheme, setTheme, type Theme } from "../utils/theme";
 import CommandPalette from "../components/CommandPalette";
 
-interface NavItem {
+type Role = "operator" | "admin";
+
+interface NavLeaf {
   to: string;
   label: string;
+  /** Shown for top-level links, and when a group is left with a single visible page and so is drawn as that page's own link. */
   icon: ReactNode;
-  minRole?: "operator" | "admin";
+  minRole?: Role;
 }
 
-const NAV_ITEMS: NavItem[] = [
+interface NavGroup {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  items: NavLeaf[];
+}
+
+type NavEntry = NavLeaf | NavGroup;
+
+const isGroup = (entry: NavEntry): entry is NavGroup => "items" in entry;
+
+const NAV: NavEntry[] = [
   { to: "/", label: "Dashboard", icon: <IconLayoutDashboard size={20} /> },
+  {
+    id: "infrastructure",
+    label: "Infrastructure",
+    icon: <IconServer2 size={20} />,
+    items: [
       { to: "/servers", label: "Servers", icon: <IconServer2 size={20} /> },
       { to: "/proxmox", label: "Proxmox", icon: <IconServerCog size={20} /> },
-  { to: "/docker", label: "Docker", icon: <IconBrandDocker size={20} /> },
       { to: "/synology", label: "Synology", icon: <IconDatabase size={20} /> },
-  { to: "/secrets", label: "Secrets", icon: <IconKey size={20} /> },
+      { to: "/docker", label: "Docker", icon: <IconBrandDocker size={20} /> },
+      { to: "/tailscale", label: "Tailscale", icon: <IconAffiliate size={20} /> },
+    ],
+  },
+  {
+    id: "network",
+    label: "Network",
+    icon: <IconWorld size={20} />,
+    items: [
       { to: "/dns", label: "DNS", icon: <IconWorld size={20} /> },
-  { to: "/consistency", label: "Consistency", icon: <IconListCheck size={20} /> },
       { to: "/domains", label: "Domains", icon: <IconWorldWww size={20} /> },
       { to: "/ipam", label: "IP Addresses", icon: <IconNetwork size={20} /> },
-  { to: "/tailscale", label: "Tailscale", icon: <IconAffiliate size={20} /> },
+      { to: "/consistency", label: "Consistency", icon: <IconListCheck size={20} /> },
+    ],
+  },
+  {
+    id: "automation",
+    label: "Automation",
+    icon: <IconRefresh size={20} />,
+    items: [
       { to: "/semaphore", label: "Semaphore", icon: <IconPlayerPlay size={20} /> },
       { to: "/gitea", label: "Gitea", icon: <IconBrandGit size={20} /> },
-  { to: "/integrations", label: "Integrations", icon: <IconPlugConnected size={20} /> },
+    ],
-  { to: "/generator", label: "Generator", icon: <IconWand size={20} /> },
+  },
+  { to: "/secrets", label: "Secrets", icon: <IconKey size={20} /> },
+  {
+    id: "operations",
+    label: "Operations",
+    icon: <IconTool size={20} />,
+    items: [
       { to: "/maintenance", label: "Maintenance", icon: <IconTool size={20} /> },
-  { to: "/privacy", label: "Privacy", icon: <IconShieldLock size={20} /> },
+      { to: "/generator", label: "Generator", icon: <IconWand size={20} /> },
+    ],
+  },
+  {
+    id: "administration",
+    label: "Administration",
+    icon: <IconSettings size={20} />,
+    items: [
+      { to: "/integrations", label: "Integrations", icon: <IconPlugConnected size={20} /> },
       { to: "/users", label: "Users", icon: <IconUsers size={20} />, minRole: "admin" },
       { to: "/sessions", label: "Sessions", icon: <IconDevices size={20} />, minRole: "admin" },
       { to: "/audit-log", label: "Audit Log", icon: <IconHistory size={20} />, minRole: "operator" },
       { to: "/diag-log", label: "Diagnostic Log", icon: <IconStethoscope size={20} />, minRole: "admin" },
       { to: "/settings", label: "Settings", icon: <IconSettings size={20} />, minRole: "admin" },
+    ],
+  },
 ];
 
 const roleRank: Record<CurrentUser["role"], number> = { viewer: 0, operator: 1, admin: 2 };
 
+/** What this role can see: pages it isn't allowed are dropped, an emptied group disappears, and a group down to one page becomes that page's own link. */
+function visibleNav(role: CurrentUser["role"]): NavEntry[] {
+  const allowed = (leaf: NavLeaf) => !leaf.minRole || roleRank[role] >= roleRank[leaf.minRole];
+  const out: NavEntry[] = [];
+  for (const entry of NAV) {
+    if (!isGroup(entry)) {
+      if (allowed(entry)) out.push(entry);
+      continue;
+    }
+    const items = entry.items.filter(allowed);
+    if (items.length === 1) out.push(items[0]);
+    else if (items.length > 1) out.push({ ...entry, items });
+  }
+  return out;
+}
+
+const OPEN_GROUPS_KEY = "hlm-nav-open-groups";
+
+function loadOpenGroups(): Set<string> {
+  try {
+    const value = JSON.parse(localStorage.getItem(OPEN_GROUPS_KEY) ?? "[]");
+    return new Set(Array.isArray(value) ? value.filter((v): v is string => typeof v === "string") : []);
+  } catch {
+    return new Set(); // storage blocked or corrupted: start with everything closed
+  }
+}
+
+/** Is this the current page (or a page beneath it, like /servers/3 under /servers)? */
+function isCurrent(pathname: string, to: string): boolean {
+  return to === "/" ? pathname === "/" : pathname === to || pathname.startsWith(`${to}/`);
+}
+
 export default function AppShell({ user, children }: { user: CurrentUser; children: ReactNode }) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [theme, setThemeState] = useState<Theme>(() => getTheme());
@@ -91,9 +172,33 @@ export default function AppShell({ user, children }: { user: CurrentUser; childr
     };
   }, []);
 
-  const visibleItems = NAV_ITEMS.filter(
+  const nav = visibleNav(user.role);
-    (item) => !item.minRole || roleRank[user.role] >= roleRank[item.minRole],
+  const { pathname } = useLocation();
-  );
+  const [openGroups, setOpenGroups] = useState<Set<string>>(loadOpenGroups);
+
+  // The group holding the current page is always open, so you can see where you are (others stay as you left them).
+  useEffect(() => {
+    const active = nav.find((entry): entry is NavGroup => isGroup(entry) && entry.items.some((item) => isCurrent(pathname, item.to)));
+    if (active) setOpenGroups((prev) => (prev.has(active.id) ? prev : new Set(prev).add(active.id)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname, user.role]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(OPEN_GROUPS_KEY, JSON.stringify([...openGroups]));
+    } catch {
+      // not persisted; the menu still works for this visit
+    }
+  }, [openGroups]);
+
+  function toggleGroup(id: string) {
+    setOpenGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
 
   function toggleTheme() {
     const next: Theme = theme === "dark" ? "light" : "dark";
@@ -121,19 +226,45 @@ export default function AppShell({ user, children }: { user: CurrentUser; childr
               <CommandPalette />
             </div>
             <ul className="navbar-nav pt-lg-3">
-              {visibleItems.map((item) => (
+              {nav.map((entry) => {
-                <li className="nav-item" key={item.to}>
+                if (!isGroup(entry)) {
-                  <NavLink
+                  return (
-                    to={item.to}
+                    <li className="nav-item" key={entry.to}>
-                    end={item.to === "/"}
+                      <NavLink to={entry.to} end={entry.to === "/"} className="nav-link" onClick={() => setSidebarOpen(false)}>
-                    className="nav-link"
+                        <span className="nav-link-icon d-md-none d-lg-inline-block">{entry.icon}</span>
-                    onClick={() => setSidebarOpen(false)}
+                        <span className="nav-link-title">{entry.label}</span>
-                  >
-                    <span className="nav-link-icon d-md-none d-lg-inline-block">{item.icon}</span>
-                    <span className="nav-link-title">{item.label}</span>
                       </NavLink>
                     </li>
+                  );
+                }
+                const open = openGroups.has(entry.id);
+                const holdsCurrent = entry.items.some((item) => isCurrent(pathname, item.to));
+                return (
+                  <li className="nav-item dropdown" key={entry.id}>
+                    <button
+                      type="button"
+                      className={`nav-link dropdown-toggle w-100 border-0 bg-transparent text-start ${open ? "show" : ""} ${holdsCurrent ? "active" : ""}`}
+                      aria-expanded={open}
+                      onClick={() => toggleGroup(entry.id)}
+                    >
+                      <span className="nav-link-icon d-md-none d-lg-inline-block">{entry.icon}</span>
+                      <span className="nav-link-title">{entry.label}</span>
+                    </button>
+                    <div className={`dropdown-menu ${open ? "show" : ""}`}>
+                      {entry.items.map((item) => (
+                        <NavLink
+                          key={item.to}
+                          to={item.to}
+                          className={({ isActive }) => `dropdown-item ${isActive ? "active" : ""}`}
+                          onClick={() => setSidebarOpen(false)}
+                        >
+                          {item.label}
+                        </NavLink>
                       ))}
+                    </div>
+                  </li>
+                );
+              })}
             </ul>
             <div className="navbar-footer px-3">
               <button
@@ -144,6 +275,14 @@ export default function AppShell({ user, children }: { user: CurrentUser; childr
                 {theme === "dark" ? <IconSun size={16} /> : <IconMoon size={16} />}
                 {theme === "dark" ? "Light mode" : "Dark mode"}
               </button>
+              <NavLink
+                to="/privacy"
+                className="btn btn-outline-secondary btn-sm w-100 mb-2 d-flex align-items-center justify-content-center gap-2"
+                onClick={() => setSidebarOpen(false)}
+              >
+                <IconShieldLock size={16} />
+                Privacy
+              </NavLink>
               <div className="text-secondary small mb-2">
                 Signed in as {user.name ?? user.email ?? user.sub} · {user.role}
               </div>

web/src/styles.css

@@ -33,3 +33,9 @@
   color: var(--tblr-secondary);
   margin-bottom: 1.5rem;
 }
+
+/* Sidebar submenus: a little tighter than Tabler's dropdown rows, so several open groups still fit on one screen. */
+.navbar-vertical .dropdown-menu .dropdown-item {
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+}