Aktueller Stand

components/NavBar.tsx

@@ -1,36 +1,77 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 import { signIn, signOut, useSession } from "next-auth/react";
 
 export default function NavBar() {
   const { data } = useSession();
-  const isAdmin = data?.user?.role === "ADMIN";
+  const pathname = usePathname();
+  const isAdmin = data?.user?.role === "ADMIN" || data?.user?.role === "SUPERADMIN";
+  const isSuperAdmin = data?.user?.role === "SUPERADMIN";
+  const [logoUrl, setLogoUrl] = useState<string | null>(null);
+  const linkClass = (href: string) =>
+    pathname === href
+      ? "rounded-full bg-slate-900 px-3 py-1 text-white"
+      : "rounded-full px-3 py-1 text-slate-700 hover:bg-slate-100";
+
+  useEffect(() => {
+    const loadLogo = async () => {
+      try {
+        const response = await fetch("/api/branding/logo", {
+          method: "HEAD",
+          cache: "no-store"
+        });
+        if (response.ok) {
+          setLogoUrl(`/api/branding/logo?ts=${Date.now()}`);
+        } else {
+          setLogoUrl(null);
+        }
+      } catch {
+        setLogoUrl(null);
+      }
+    };
+    loadLogo();
+  }, []);
 
   return (
-    <header className="border-b border-slate-200/70 bg-white/80 backdrop-blur">
+    <header className="sticky top-0 z-20 border-b border-slate-200/70 bg-white/70 backdrop-blur">
       <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-4">
-        <Link href="/" className="text-lg font-semibold text-slate-900">
-          Vereinskalender
+        <Link href="/" className="flex items-center gap-3 text-lg font-semibold tracking-tight text-slate-900">
+          {logoUrl && (
+            <img
+              src={logoUrl}
+              alt="Vereinskalender Logo"
+              className="h-8 w-auto max-w-[140px] object-contain"
+              onError={() => setLogoUrl(null)}
+            />
+          )}
+          <span>Vereinskalender</span>
         </Link>
-        <nav className="flex items-center gap-4 text-sm">
+        <nav className="flex items-center gap-3 text-sm">
           {data?.user && (
             <>
-              <Link href="/views" className="text-slate-700 hover:text-slate-900">
-                Meine Ansichten
-              </Link>
               {isAdmin && (
-                <Link href="/admin" className="text-slate-700 hover:text-slate-900">
-                  Admin
-                </Link>
+                <>
+                  <Link href="/admin" className={linkClass("/admin")}>
+                    Admin
+                  </Link>
+                  <Link href="/admin/users" className={linkClass("/admin/users")}>
+                    Registrierungen
+                  </Link>
+                </>
               )}
+              <Link href="/settings" className={linkClass("/settings")}>
+                Einstellungen
+              </Link>
             </>
           )}
           {data?.user ? (
             <button
               type="button"
               onClick={() => signOut()}
-              className="rounded bg-slate-900 px-3 py-1.5 text-white"
+              className="btn-primary"
             >
               Logout
             </button>
@@ -38,7 +79,7 @@ export default function NavBar() {
             <button
               type="button"
               onClick={() => signIn()}
-              className="rounded bg-brand-500 px-3 py-1.5 text-white"
+              className="btn-accent"
             >
               Login
             </button>