feat: global SiteHeader avec user menu (login/inscription, Mes réservations, Espace hôte, Admin)

src/components/SiteHeader.tsx

@@ -0,0 +1,79 @@
+/**
+ * Header global affiché sur toutes les pages PUBLIQUES (hors /admin qui a son
+ * propre shell). Charge la session côté serveur pour adapter les liens.
+ */
+
+import Link from "next/link";
+
+import { auth } from "@/auth";
+import { UserRole } from "@/generated/prisma/enums";
+
+import { SignOutButton } from "./SignOutButton";
+
+export async function SiteHeader() {
+  const session = await auth();
+  const u = session?.user;
+  const isAdmin = u?.role === UserRole.ADMIN;
+  const isOwner = u?.role === UserRole.OWNER || isAdmin;
+
+  return (
+    <header className="sticky top-0 z-30 border-b border-zinc-200 bg-white/85 backdrop-blur supports-[backdrop-filter]:bg-white/70">
+      <div className="mx-auto flex h-12 max-w-7xl items-center justify-between gap-4 px-4">
+        <Link href="/" className="flex items-center gap-2 text-base font-semibold text-zinc-900">
+          <span className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-emerald-600 text-xs font-bold text-white">
+            K
+          </span>
+          Karbé
+        </Link>
+
+        <nav className="hidden items-center gap-5 text-sm text-zinc-700 sm:flex">
+          <Link href="/carbets" className="hover:text-zinc-900">
+            Carbets
+          </Link>
+          <Link href="/comment-ca-marche" className="hover:text-zinc-900">
+            Comment ça marche
+          </Link>
+          <Link href="/pour-comites-entreprise" className="hover:text-zinc-900">
+            Comités d&apos;entreprise
+          </Link>
+        </nav>
+
+        <div className="flex items-center gap-3 text-sm">
+          {u ? (
+            <>
+              <Link href="/mes-reservations" className="hidden text-zinc-700 hover:text-zinc-900 sm:inline">
+                Mes réservations
+              </Link>
+              {isOwner ? (
+                <Link href="/espace-hote" className="hidden text-zinc-700 hover:text-zinc-900 sm:inline">
+                  Espace hôte
+                </Link>
+              ) : null}
+              {isAdmin ? (
+                <Link href="/admin" className="hidden rounded-md bg-zinc-900 px-2.5 py-1 text-xs font-semibold text-white hover:bg-zinc-800 sm:inline-block">
+                  Admin
+                </Link>
+              ) : null}
+              <span className="hidden max-w-[14ch] truncate text-xs text-zinc-500 md:inline" title={u.email ?? ""}>
+                {u.name || u.email}
+              </span>
+              <SignOutButton />
+            </>
+          ) : (
+            <>
+              <Link href="/connexion" className="text-zinc-700 hover:text-zinc-900">
+                Connexion
+              </Link>
+              <Link
+                href="/inscription"
+                className="rounded-md bg-zinc-900 px-3 py-1 text-xs font-semibold text-white hover:bg-zinc-800"
+              >
+                Créer un compte
+              </Link>
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}