Sprint 8: modernes Design-System für die React-PWA

Gemeinsames Stylesheet (Tokens, Karten, Buttons, Badges, Formulare) plus AppShell (Kopfzeile mit Navigation/Logout) statt Inline-Styles je Screen. Kein UI-Framework als neue Abhängigkeit - schlankes eigenes CSS, damit Build/Deploy-Weg unverändert bleibt. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L85hmKbvX7Cqkq47KnQhFt
2026-09-04 00:38:02 +02:00
parent a97886defd
commit e3ed5e0f28
8 changed files with 598 additions and 162 deletions
@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import { NavLink, useNavigate } from "react-router-dom";
+
+import { useAuth } from "../auth/AuthContext";
+
+/** Gemeinsamer Rahmen (Kopfzeile + Navigation) für alle eingeloggten Screens. */
+export function AppShell({ children }: { children: ReactNode }) {
+  const { istAdmin, logout } = useAuth();
+  const navigate = useNavigate();
+
+  function handleLogout() {
+    logout();
+    navigate("/login");
+  }
+
+  return (
+    <div className="app-shell">
+      <header className="topbar">
+        <NavLink to="/objekte" className="topbar-brand">
+          MABEA
+        </NavLink>
+        <nav className="topbar-nav">
+          <NavLink to="/objekte" className={({ isActive }) => (isActive ? "active" : "")}>
+            Objekte
+          </NavLink>
+          {istAdmin && (
+            <NavLink to="/admin" className={({ isActive }) => (isActive ? "active" : "")}>
+              Administration
+            </NavLink>
+          )}
+          <button className="btn btn-secondary" onClick={handleLogout}>
+            Abmelden
+          </button>
+        </nav>
+      </header>
+      {children}
+    </div>
+  );
+}