refactor(frontend): Menü auf eigenes Sidebar-Primitive umgebaut

Hauptnav (AppShell) und Admin-Gruppennav nutzen jetzt dasselbe collapsible Sidebar-Muster (Icons, Gruppen, Mobile-Sheet, Strg/⌘+B) statt Topbar + separater Button-Liste. Tote .app-shell/.topbar-CSS entfernt. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012BmsfwPHiAjwtJetgykazx
2026-09-11 15:28:59 +02:00
1 parent ffc9559ac3
commit 71aa07dd52
@@ -1,46 +1,33 @@
-import { useState, type ReactNode } from "react";
-import { NavLink, useNavigate } from "react-router-dom";
+import { Boxes, LayoutDashboard, LogOut, PackageX, ShieldCheck, TriangleAlert, type LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useNavigate } from "react-router-dom";

 import { useAuth } from "../auth/AuthContext";
 import { CommandPalette } from "./CommandPalette";
 import { SyncStatus } from "./status/SyncStatus";
 import { ThemeToggle } from "./ThemeToggle";
-
-const SPEICHER_KEY = "mabea-sidebar-eingeklappt";
-
-function eingeklapptLaden(): boolean {
-  try {
-    return localStorage.getItem(SPEICHER_KEY) === "1";
-  } catch {
-    return false;
-  }
-}
-
-function eingeklapptSpeichern(wert: boolean): void {
-  try {
-    localStorage.setItem(SPEICHER_KEY, wert ? "1" : "0");
-  } catch {
-    // Speichern optional
-  }
-}
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNavLink, SidebarProvider, SidebarTrigger } from "./ui/sidebar";

 function paletteOeffnen() {
  window.dispatchEvent(new Event("mabea:open-command-palette"));
 }

-/** Gemeinsamer Rahmen (Kopfzeile + Navigation) für alle eingeloggten Screens. */
+type NavItem = { pfad: string; label: string; icon: LucideIcon };
+
+const HAUPT_NAV: NavItem[] = [
+  { pfad: "/objekte", label: "Objekte", icon: Boxes },
+  { pfad: "/maengel", label: "Mängel", icon: TriangleAlert },
+];
+
+const LEITUNGS_NAV: NavItem[] = [
+  { pfad: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { pfad: "/fehlbestaende", label: "Fehlbestände", icon: PackageX },
+];
+
+/** Gemeinsamer Rahmen (linke Navigation + schmale Kopfzeile) für alle eingeloggten Screens. */
 export function AppShell({ children }: { children: ReactNode }) {
  const { istAdmin, istVerantwortlich, logout } = useAuth();
  const navigate = useNavigate();
-  const [eingeklappt, setEingeklappt] = useState(eingeklapptLaden);
-
-  function umschalten() {
-    setEingeklappt((bisherig) => {
-      const neu = !bisherig;
-      eingeklapptSpeichern(neu);
-      return neu;
-    });
-  }

  function handleLogout() {
    logout();
@@ -48,57 +35,73 @@ export function AppShell({ children }: { children: ReactNode }) {
  }

  return (
-    <div className="app-shell">
-      <header className={`topbar${eingeklappt ? " topbar-eingeklappt" : ""}`}>
-        <button
-          className="topbar-toggle"
-          onClick={umschalten}
-          title={eingeklappt ? "Navigation einblenden" : "Navigation ausblenden"}
-          aria-label={eingeklappt ? "Navigation einblenden" : "Navigation ausblenden"}
-        >
-          {eingeklappt ? "»" : "«"}
-        </button>
-        {!eingeklappt && (
-          <>
-            <NavLink to="/objekte" className="topbar-brand">
-              MABEA
-            </NavLink>
-            <nav className="topbar-nav">
-              <NavLink to="/objekte" className={({ isActive }) => (isActive ? "active" : "")}>
-                Objekte
-              </NavLink>
-              <NavLink to="/maengel" className={({ isActive }) => (isActive ? "active" : "")}>
-                Mängel
-              </NavLink>
-              {istVerantwortlich && (
-                <NavLink to="/dashboard" className={({ isActive }) => (isActive ? "active" : "")}>
-                  Dashboard
-                </NavLink>
-              )}
-              {istVerantwortlich && (
-                <NavLink to="/fehlbestaende" className={({ isActive }) => (isActive ? "active" : "")}>
-                  Fehlbestände
-                </NavLink>
-              )}
-              {istVerantwortlich && (
-                <NavLink to="/admin" className={({ isActive }) => (isActive ? "active" : "")}>
-                  {istAdmin ? "Administration" : "Verwaltung"}
-                </NavLink>
-              )}
-              <SyncStatus />
-              <button className="btn btn-secondary" onClick={paletteOeffnen} title="Globale Suche (Strg/⌘+K)">
-                🔍 Suche
-              </button>
-              <ThemeToggle />
-              <button className="btn btn-secondary" onClick={handleLogout}>
-                Abmelden
-              </button>
-            </nav>
-          </>
-        )}
-      </header>
-      <CommandPalette />
-      {children}
+    <SidebarProvider>
+      <Sidebar titel="MABEA">
+        <SidebarHeader>
+          <SidebarTrigger />
+          <span className="truncate font-semibold text-[var(--color-text)]">MABEA</span>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            {HAUPT_NAV.map((item) => (
+              <SidebarNavLink key={item.pfad} to={item.pfad} icon={<item.icon />}>
+                {item.label}
+              </SidebarNavLink>
+            ))}
+          </SidebarGroup>
+          {istVerantwortlich && (
+            <SidebarGroup label="Leitung">
+              {LEITUNGS_NAV.map((item) => (
+                <SidebarNavLink key={item.pfad} to={item.pfad} icon={<item.icon />}>
+                  {item.label}
+                </SidebarNavLink>
+              ))}
+            </SidebarGroup>
+          )}
+          {istVerantwortlich && (
+            <SidebarGroup label="Verwaltung">
+              <SidebarNavLink to="/admin" icon={<ShieldCheck />}>
+                {istAdmin ? "Administration" : "Verwaltung"}
+              </SidebarNavLink>
+            </SidebarGroup>
+          )}
+        </SidebarContent>
+        <SidebarFooter>
+          <ThemeToggle />
+          <button
+            type="button"
+            onClick={handleLogout}
+            className="flex h-9 w-full items-center gap-2 rounded-md px-2 text-left text-sm text-[var(--color-text-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-text)]"
+          >
+            <LogOut className="h-4 w-4 shrink-0" />
+            <span className="truncate">Abmelden</span>
+          </button>
+        </SidebarFooter>
+      </Sidebar>
+
+      <div className="flex min-h-svh w-full min-w-0 flex-col">
+        <header className="flex h-14 shrink-0 items-center gap-3 border-b border-[var(--color-border)] bg-[var(--color-surface)] px-3">
+          <SidebarTriggerMobile />
+          <div className="flex flex-1 items-center justify-end gap-2">
+            <SyncStatus />
+            <button className="btn btn-secondary" onClick={paletteOeffnen} title="Globale Suche (Strg/⌘+K)">
+              🔍 Suche
+            </button>
+          </div>
+        </header>
+        <CommandPalette />
+        {children}
+      </div>
+    </SidebarProvider>
+  );
+}
+
+// Auf Desktop übernimmt der Trigger im Sidebar-Header das Ein-/Ausklappen;
+// hier nur sichtbar auf Mobile, wo die Sidebar als Sheet-Overlay läuft.
+function SidebarTriggerMobile() {
+  return (
+    <div className="md:hidden">
+      <SidebarTrigger />
    </div>
  );
 }
@@ -0,0 +1,216 @@
+import { PanelLeft } from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useState, type ComponentProps, type ReactNode } from "react";
+import { NavLink, type NavLinkProps } from "react-router-dom";
+
+import { useIsMobile } from "../../hooks/use-mobile";
+import { cn } from "../../lib/utils";
+import { Sheet } from "./sheet";
+
+const SPEICHER_KEY = "mabea-sidebar-eingeklappt";
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_ICON = "3.5rem";
+
+type SidebarContextProps = {
+  eingeklappt: boolean;
+  umschalten: () => void;
+  istMobil: boolean;
+  mobilOffen: boolean;
+  setMobilOffen: (offen: boolean) => void;
+};
+
+const SidebarContext = createContext<SidebarContextProps | null>(null);
+
+export function useSidebar(): SidebarContextProps {
+  const ctx = useContext(SidebarContext);
+  if (!ctx) throw new Error("useSidebar muss innerhalb von SidebarProvider verwendet werden.");
+  return ctx;
+}
+
+function eingeklapptLaden(): boolean {
+  try {
+    return localStorage.getItem(SPEICHER_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+/** Rahmen-Provider fürs Sidebar-Layout - hält Ein-/Ausklapp- und Mobile-Overlay-Status. */
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+  const istMobil = useIsMobile();
+  const [eingeklappt, setEingeklappt] = useState(eingeklapptLaden);
+  const [mobilOffen, setMobilOffen] = useState(false);
+
+  const umschalten = useCallback(() => {
+    if (istMobil) {
+      setMobilOffen((v) => !v);
+      return;
+    }
+    setEingeklappt((bisherig) => {
+      const neu = !bisherig;
+      try {
+        localStorage.setItem(SPEICHER_KEY, neu ? "1" : "0");
+      } catch {
+        // Speichern optional
+      }
+      return neu;
+    });
+  }, [istMobil]);
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "b" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        umschalten();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [umschalten]);
+
+  const value = useMemo<SidebarContextProps>(
+    () => ({ eingeklappt, umschalten, istMobil, mobilOffen, setMobilOffen }),
+    [eingeklappt, umschalten, istMobil, mobilOffen]
+  );
+
+  return (
+    <SidebarContext.Provider value={value}>
+      <div
+        className="flex"
+        style={{ "--sidebar-width": SIDEBAR_WIDTH, "--sidebar-width-icon": SIDEBAR_WIDTH_ICON } as React.CSSProperties}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+}
+
+/** Linke Navigationsspalte. Desktop: fest/eingeklappt (Icon-only). Mobile: Sheet-Overlay. */
+export function Sidebar({ children, titel }: { children: React.ReactNode; titel?: string }) {
+  const { istMobil, eingeklappt, mobilOffen, setMobilOffen } = useSidebar();
+
+  if (istMobil) {
+    return (
+      <Sheet offen={mobilOffen} titel={titel} onSchliessen={() => setMobilOffen(false)}>
+        <nav className="flex flex-col gap-1">{children}</nav>
+      </Sheet>
+    );
+  }
+
+  return (
+    <aside
+      data-state={eingeklappt ? "collapsed" : "expanded"}
+      className={cn(
+        "sticky top-0 flex h-svh shrink-0 flex-col overflow-hidden border-r border-[var(--color-border)] bg-[var(--color-sidebar)] text-[var(--color-sidebar-foreground)] transition-[width] duration-200 ease-linear",
+        eingeklappt ? "w-[--sidebar-width-icon]" : "w-[--sidebar-width]"
+      )}
+    >
+      {children}
+    </aside>
+  );
+}
+
+export function SidebarTrigger({ className }: { className?: string }) {
+  const { umschalten } = useSidebar();
+  return (
+    <button
+      type="button"
+      onClick={umschalten}
+      title="Navigation umschalten (Strg/⌘+B)"
+      aria-label="Navigation umschalten"
+      className={cn(
+        "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-[var(--color-text-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-text)]",
+        className
+      )}
+    >
+      <PanelLeft className="h-4 w-4" />
+    </button>
+  );
+}
+
+export function SidebarHeader({ children, className }: { children: React.ReactNode; className?: string }) {
+  return <div className={cn("flex h-14 shrink-0 items-center gap-2 border-b border-[var(--color-border)] px-3", className)}>{children}</div>;
+}
+
+export function SidebarContent({ children }: { children: React.ReactNode }) {
+  return <div className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-2 py-3">{children}</div>;
+}
+
+export function SidebarFooter({ children }: { children: React.ReactNode }) {
+  return <div className="flex shrink-0 flex-col gap-1 border-t border-[var(--color-border)] p-2">{children}</div>;
+}
+
+export function SidebarGroup({ label, children }: { label?: string; children: React.ReactNode }) {
+  const { eingeklappt, istMobil } = useSidebar();
+  return (
+    <div className="flex flex-col gap-0.5 py-1">
+      {label && !(eingeklappt && !istMobil) && (
+        <div className="px-2 pb-1 pt-2 text-[0.7rem] font-semibold uppercase tracking-wide text-[var(--color-text-muted)]">
+          {label}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+type SidebarItemProps = ComponentProps<"button"> & {
+  aktiv?: boolean;
+  icon?: React.ReactNode;
+  titel?: string;
+};
+
+/** Einzelner Menüpunkt - im eingeklappten Desktop-Zustand nur Icon + Tooltip via title-Attribut. */
+export const SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarItemProps>(
+  ({ aktiv, icon, titel, className, children, ...props }, ref) => {
+    const { eingeklappt, istMobil } = useSidebar();
+    const nurIcon = eingeklappt && !istMobil;
+    return (
+      <button
+        ref={ref}
+        type="button"
+        title={nurIcon ? titel : undefined}
+        aria-current={aktiv ? "page" : undefined}
+        className={cn(
+          "flex h-9 w-full items-center gap-2 overflow-hidden rounded-md px-2 text-left text-sm outline-none transition-colors hover:bg-[var(--color-surface-sunken)] focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+          aktiv && "bg-[var(--color-primary-soft)] font-medium text-[var(--color-primary)]",
+          nurIcon && "justify-center px-0",
+          className
+        )}
+        {...props}
+      >
+        {icon && <span className="flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4">{icon}</span>}
+        {!nurIcon && <span className="truncate">{children}</span>}
+      </button>
+    );
+  }
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+type SidebarNavLinkProps = Omit<NavLinkProps, "className" | "children"> & {
+  icon?: ReactNode;
+  children: ReactNode;
+  onKlick?: () => void;
+};
+
+/** Wie SidebarMenuButton, aber als echter Router-Link (aktiv-Status per NavLink selbst). */
+export function SidebarNavLink({ icon, children, onKlick, ...props }: SidebarNavLinkProps) {
+  const { eingeklappt, istMobil } = useSidebar();
+  const nurIcon = eingeklappt && !istMobil;
+  return (
+    <NavLink
+      {...props}
+      onClick={onKlick}
+      title={nurIcon ? String(children) : undefined}
+      className={({ isActive }) =>
+        cn(
+          "flex h-9 w-full items-center gap-2 overflow-hidden rounded-md px-2 text-left text-sm outline-none transition-colors hover:bg-[var(--color-surface-sunken)] focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+          isActive && "bg-[var(--color-primary-soft)] font-medium text-[var(--color-primary)]",
+          nurIcon && "justify-center px-0"
+        )
+      }
+    >
+      {icon && <span className="flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4">{icon}</span>}
+      {!nurIcon && <span className="truncate">{children}</span>}
+    </NavLink>
+  );
+}
@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile(): boolean {
+  const [istMobil, setIstMobil] = useState(() =>
+    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT : false
+  );
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIstMobil(window.innerWidth < MOBILE_BREAKPOINT);
+    mql.addEventListener("change", onChange);
+    onChange();
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return istMobil;
+}
@@ -33,6 +33,7 @@ import { InventurSection } from "./admin/InventurSection";
 import { FehlerTrackingSection } from "./admin/FehlerTrackingSection";
 import { PruefartenSection } from "./admin/PruefartenSection";
 import { VerleihSection } from "./admin/VerleihSection";
+import { SidebarGroup, SidebarMenuButton, SidebarProvider } from "../components/ui/sidebar";

 type Tab =
  | "objekte"
@@ -256,32 +257,23 @@ export function AdminPage() {
      {fehler && <div className="alert alert-danger">{fehler}</div>}

      <div className="split-layout">
-          <nav className="card split-layout-sidebar">
-            {GRUPPEN_REIHENFOLGE.map((gruppe) => {
-              const tabsInGruppe = sichtbareTabs.filter((t) => t.gruppe === gruppe);
-              if (tabsInGruppe.length === 0) return null;
-              return (
-                <div key={gruppe} style={{ marginBottom: "1rem" }}>
-                  <div
-                    className="text-muted"
-                    style={{ fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", marginBottom: "0.4rem" }}
-                  >
-                    {GRUPPEN_LABEL[gruppe]}
-                  </div>
-                  {tabsInGruppe.map((t) => (
-                    <button
-                      key={t.key}
-                      className={aktiverTab === t.key ? "btn btn-primary btn-block" : "btn btn-secondary btn-block"}
-                      style={{ marginBottom: "0.3rem" }}
-                      onClick={() => setTab(t.key)}
-                    >
-                      {t.label}
-                    </button>
-                  ))}
-                </div>
-              );
-            })}
-          </nav>
+          <SidebarProvider>
+            <nav className="card split-layout-sidebar flex flex-col gap-1 p-2">
+              {GRUPPEN_REIHENFOLGE.map((gruppe) => {
+                const tabsInGruppe = sichtbareTabs.filter((t) => t.gruppe === gruppe);
+                if (tabsInGruppe.length === 0) return null;
+                return (
+                  <SidebarGroup key={gruppe} label={GRUPPEN_LABEL[gruppe]}>
+                    {tabsInGruppe.map((t) => (
+                      <SidebarMenuButton key={t.key} aktiv={aktiverTab === t.key} titel={t.label} onClick={() => setTab(t.key)}>
+                        {t.label}
+                      </SidebarMenuButton>
+                    ))}
+                  </SidebarGroup>
+                );
+              })}
+            </nav>
+          </SidebarProvider>
          <div className="split-layout-content">
      {aktiverTab === "objekte" && (
        <ObjektSection
@@ -1,101 +1,8 @@
 /* -- Layout ------------------------------------------------------------- */

-/* Sidebar-Layout (Redesign 3. Durchgang, Vorbild OpenFleet-Screenshot):
-   .app-shell steht ab Desktop-Breite als Reihe (Sidebar links, Seite rechts),
-   .topbar ist trotz Klassennamen die Sidebar selbst - kein JSX-Umbau nötig,
-   AppShell.tsx bleibt unverändert, nur die Werte hier drehen das Layout.
-   Unter 768px kippt es zurück auf die bisherige horizontale Topbar-Leiste
-   (siehe Media-Query unten), da der Mobile-Durchgang das schon gut löste. */
-
-.app-shell {
-  min-height: 100%;
-  display: flex;
-  flex-direction: row;
-}
-
-.topbar {
-  background: var(--color-surface);
-  border-right: 1px solid var(--color-border);
-  padding: 1.25rem 1rem;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 1.5rem;
-  width: 230px;
-  flex: 0 0 230px;
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  overflow-y: auto;
-  transition: width 0.18s ease, flex-basis 0.18s ease, padding 0.18s ease;
-}
-
-/* Sidebar einklappbar - Nutzer-Wunsch (mehr Platz für breite Dashboard-Raster
-   auf Desktop-Monitoren). Nur der Toggle-Button bleibt sichtbar. */
-.topbar-eingeklappt {
-  width: 48px;
-  flex: 0 0 48px;
-  padding: 1.25rem 0.5rem;
-  align-items: center;
-  overflow: visible;
-}
-
-.topbar-toggle {
-  background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  color: var(--color-text-muted);
-  cursor: pointer;
-  font-size: 0.9rem;
-  line-height: 1;
-  padding: 0.4rem 0.55rem;
-  align-self: flex-end;
-}
-
-.topbar-eingeklappt .topbar-toggle {
-  align-self: center;
-}
-
-.topbar-toggle:hover {
-  background: var(--color-surface-sunken);
-  color: var(--color-text);
-}
-
-.topbar-brand {
-  font-weight: 800;
-  font-size: 1.15rem;
-  letter-spacing: -0.02em;
-  color: var(--color-primary);
-  text-decoration: none;
-  padding: 0 0.5rem;
-}
-
-.topbar-nav {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 0.15rem;
-}
-
-.topbar-nav a {
-  color: var(--color-text-muted);
-  text-decoration: none;
-  padding: 0.55rem 0.75rem;
-  border-radius: var(--radius-sm);
-  font-size: 0.92rem;
-  font-weight: 600;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.topbar-nav a:hover {
-  background: var(--color-surface-sunken);
-  color: var(--color-text);
-}
-
-.topbar-nav a.active {
-  background: var(--color-primary-soft);
-  color: var(--color-primary);
-}
+/* Haupt-Navigation (Sidebar links) läuft seit Redesign 4 über die Tailwind-
+   Primitives in components/ui/sidebar.tsx (siehe AppShell.tsx) - hier nur
+   noch die seitenunabhängigen .page-Klassen. */

 .page {
  flex: 1;
@@ -43,37 +43,6 @@
    padding: 1.25rem 1rem 2rem;
  }

-  /* Sidebar -> horizontale Topbar zurückklappen (Mobile-Durchgang) */
-  .app-shell {
-    flex-direction: column;
-  }
-
-  .topbar {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: auto;
-    flex: 0 0 auto;
-    height: auto;
-    position: sticky;
-    padding: 0.6rem 0.9rem;
-    border-right: none;
-    border-bottom: 1px solid var(--color-border);
-    flex-wrap: wrap;
-    gap: 0.75rem;
-  }
-
-  .topbar-nav {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 0.15rem;
-  }
-
-  .topbar-nav a {
-    padding: 0.4rem 0.6rem;
-    font-size: 0.85rem;
-  }
-
  h1 {
    font-size: 1.35rem;
  }