feat(web): collapsible icon sidebar (persisted, auto-collapse on narrow) (#44, #58)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-06 23:44:40 +02:00
parent 04c33cb1aa
commit 184e4ea2a5
6 changed files with 195 additions and 48 deletions
@@ -0,0 +1,126 @@
+import { useEffect, useState } from "react";
+import { NavLink } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  BookMarked,
+  Boxes,
+  PanelLeft,
+  PanelLeftClose,
+  Search,
+  Tags,
+  Users,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Tooltip } from "@/components/ui/tooltip";
+import { useMediaQuery } from "@/lib/use-media-query";
+
+const STORAGE_KEY = "sidebar-collapsed";
+
+type NavItem = {
+  to: string;
+  /** i18n key under `nav.*`. */
+  label: string;
+  Icon: LucideIcon;
+};
+
+const NAV_ITEMS: readonly NavItem[] = [
+  { to: "/objects", label: "nav.objects", Icon: Boxes },
+  { to: "/vocabularies", label: "nav.vocabularies", Icon: BookMarked },
+  { to: "/authorities", label: "nav.authorities", Icon: Users },
+  { to: "/search", label: "nav.search", Icon: Search },
+  { to: "/fields", label: "nav.fields", Icon: Tags },
+];
+
+function readStored(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.localStorage.getItem(STORAGE_KEY) === "true";
+}
+
+function navLinkClass(collapsed: boolean) {
+  return ({ isActive }: { isActive: boolean }) =>
+    cn(
+      "flex items-center gap-2 rounded px-2 py-1 outline-none",
+      "focus-visible:ring-3 focus-visible:ring-ring/50",
+      collapsed && "justify-center",
+      isActive && "bg-neutral-200 font-medium",
+    );
+}
+
+export function Sidebar() {
+  const { t } = useTranslation();
+  const narrow = useMediaQuery("(max-width: 768px)");
+  const [stored, setStored] = useState(readStored);
+
+  // On narrow viewports the rail is always collapsed regardless of the stored
+  // preference; the toggle only takes effect when wide.
+  const collapsed = narrow || stored;
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(STORAGE_KEY, String(stored));
+    }
+  }, [stored]);
+
+  const toggle = () => setStored((prev) => !prev);
+
+  return (
+    <aside
+      className={cn(
+        "flex shrink-0 flex-col border-r bg-neutral-50 p-3 transition-[width]",
+        collapsed ? "w-14" : "w-44",
+      )}
+    >
+      <div className="mb-4 flex items-center justify-between">
+        {!collapsed && <span className="font-semibold">{t("app.name")}</span>}
+        <button
+          type="button"
+          onClick={toggle}
+          disabled={narrow}
+          aria-expanded={!collapsed}
+          aria-label={t(collapsed ? "nav.expandSidebar" : "nav.collapseSidebar")}
+          title={t(collapsed ? "nav.expandSidebar" : "nav.collapseSidebar")}
+          className={cn(
+            "flex items-center justify-center rounded p-1 outline-none",
+            "hover:bg-neutral-200 focus-visible:ring-3 focus-visible:ring-ring/50",
+            "disabled:pointer-events-none disabled:opacity-50",
+          )}
+        >
+          {collapsed ? (
+            <PanelLeft className="size-4" />
+          ) : (
+            <PanelLeftClose className="size-4" />
+          )}
+        </button>
+      </div>
+      <nav className="space-y-1 text-sm">
+        {NAV_ITEMS.map(({ to, label, Icon }) => {
+          const text = t(label);
+
+          if (collapsed) {
+            return (
+              <Tooltip key={to} content={text} side="right">
+                <NavLink
+                  to={to}
+                  aria-label={text}
+                  title={text}
+                  className={navLinkClass(true)}
+                >
+                  <Icon className="size-4" aria-hidden="true" />
+                </NavLink>
+              </Tooltip>
+            );
+          }
+
+          return (
+            <NavLink key={to} to={to} className={navLinkClass(false)}>
+              <Icon className="size-4" aria-hidden="true" />
+              <span>{text}</span>
+            </NavLink>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}