From 3789b165628dbec4d92360d6c2747b2e10e4a766 Mon Sep 17 00:00:00 2001
From: Sam Geyskens <sam@geyskens.eu>
Date: Fri, 15 May 2026 09:26:03 +0200
Subject: [PATCH] refactor: update Header component for improved navigation and
 styling

---
 .gitignore                |  6 +--
 src/components/Header.tsx | 84 +++++++++++++++++++++------------------
 2 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/.gitignore b/.gitignore
index c080985..a066314 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,8 +13,8 @@ build/
 .env.local
 .env.*.local
 
-# Prisma generated
-prisma/migrations/
+# Prisma generated client (niet de migrations zelf!)
+prisma/generated/
 
 # Misc
 .DS_Store
@@ -22,4 +22,4 @@ prisma/migrations/
 .vercel
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0ebf162..e2568a7 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,74 +5,82 @@ import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
 
+const NAV = [
+  { href: "/",        label: "Klassement", icon: "🏆" },
+  { href: "/log",     label: "Loggen",     icon: "➕" },
+  { href: "/history", label: "Geschiedenis", icon: "📅" },
+];
+
 export function Header() {
   const { data: session } = useSession();
   const pathname = usePathname();
 
-  const nav = [
-    { href: "/", label: "🏆 Klassement" },
-    { href: "/log", label: "➕ Loggen" },
-    { href: "/history", label: "📅 Geschiedenis" },
-  ];
-
   return (
-    <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur-sm sticky top-0 z-10">
-      <div className="max-w-2xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
+    <header className="border-b border-slate-800 bg-slate-900 sticky top-0 z-10">
+      <div className="max-w-2xl mx-auto px-4 h-14 flex items-center gap-3">
+
         {/* Logo */}
-        <Link href="/" className="text-lg font-bold text-slate-100 shrink-0">
+        <Link href="/" className="font-bold text-slate-100 shrink-0 text-base">
           💤 SlaapKampioen
         </Link>
 
-        {/* Nav */}
-        <nav className="flex gap-1 overflow-x-auto">
-          {nav.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium whitespace-nowrap transition-colors ${
-                pathname === item.href
-                  ? "bg-indigo-600 text-white"
-                  : "text-slate-400 hover:text-slate-100 hover:bg-slate-800"
-              }`}
-            >
-              {item.label}
-            </Link>
-          ))}
+        {/* Nav — groeit mee, items krimpen nooit onder hun tekst */}
+        <nav className="flex gap-1 flex-1 justify-center">
+          {NAV.map((item) => {
+            const active = pathname === item.href;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-sm font-medium whitespace-nowrap transition-colors ${
+                  active
+                    ? "bg-indigo-600 text-white"
+                    : "text-slate-400 hover:text-slate-100 hover:bg-slate-800"
+                }`}
+              >
+                <span>{item.icon}</span>
+                {/* Label verbergen op heel kleine schermen */}
+                <span className="hidden sm:inline">{item.label}</span>
+              </Link>
+            );
+          })}
         </nav>
 
         {/* User */}
         <div className="shrink-0">
           {session ? (
-            <div className="flex items-center gap-2">
-              {session.user?.image && (
+            <button
+              onClick={() => signOut()}
+              className="flex items-center gap-2 group"
+              title="Afmelden"
+            >
+              {session.user?.image ? (
                 <Image
                   src={session.user.image}
                   alt={session.user.name ?? "avatar"}
                   width={32}
                   height={32}
-                  className="rounded-full ring-2 ring-indigo-500"
+                  className="rounded-full ring-2 ring-slate-700 group-hover:ring-red-400 transition-all"
                 />
+              ) : (
+                <div className="w-8 h-8 rounded-full bg-indigo-700 flex items-center justify-center text-sm font-bold">
+                  {session.user?.name?.charAt(0).toUpperCase()}
+                </div>
               )}
-              <button
-                onClick={() => signOut()}
-                className="text-xs text-slate-400 hover:text-slate-100 transition-colors"
-              >
-                Afmelden
-              </button>
-            </div>
+            </button>
           ) : (
             <button
               onClick={() => signIn("discord")}
-              className="flex items-center gap-2 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 rounded-lg text-sm font-medium transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 rounded-lg text-sm font-medium transition-colors"
             >
-              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+              <svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="currentColor">
                 <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057c.002.022.015.043.033.057a19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z" />
               </svg>
-              Discord
+              <span className="hidden sm:inline">Discord</span>
             </button>
           )}
         </div>
       </div>
     </header>
   );
-}
+}
\ No newline at end of file