From d50555cbc4a758b031c60bee0314be155641731a Mon Sep 17 00:00:00 2001
From: kbe <kevin@kev1.net>
Date: Thu, 14 Aug 2025 17:08:56 +0200
Subject: [PATCH] In the header make use of next/navigation to get the path
 name and display current link

---
 components/ui/header.tsx | 90 +++++++++++++++++++++++++---------------
 1 file changed, 57 insertions(+), 33 deletions(-)

diff --git a/components/ui/header.tsx b/components/ui/header.tsx
index 2d5dd9c..08b255a 100644
--- a/components/ui/header.tsx
+++ b/components/ui/header.tsx
@@ -3,7 +3,9 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
 import Link from "next/link"
-import { useState } from "react"
+import { useState, useEffect } from "react"
+import { usePathname } from "next/navigation"
+
 
 interface HeaderProps {
   className?: string
@@ -24,6 +26,22 @@ const navigation = [
 export function Header({ className, isLoggedIn = false, isAdmin = false }: HeaderProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [profileOpen, setProfileOpen] = useState(false)
+  const [activeNavItem, setActiveNavItem] = useState<string | null>(null)
+
+  // Use usePathname for client-side navigation
+  let pathname = usePathname()
+
+  // Update activeNavItem when pathname changes
+  useEffect(() => {
+    if (pathname) {
+      setActiveNavItem(pathname)
+    }
+  }, [pathname])
+
+  // Only render the header after the pathname is available
+  if (!pathname) {
+    return null
+  }
 
   return (
     <header className={cn("bg-gray-900 shadow-sm", className)}>
@@ -41,23 +59,26 @@ export function Header({ className, isLoggedIn = false, isAdmin = false }: Heade
             </div>
             <div className="hidden md:block">
               <div className="ml-10 flex items-baseline space-x-4">
-                {navigation.map((item) => (
-                  (item.requiresAuth ? (isLoggedIn || isAdmin) : true) && (
-                    <Link
-                      key={item.name}
-                      href={item.href}
-                      className={cn(
-                        item.current
-                          ? 'bg-gray-800 text-white'
-                          : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-                        'rounded-md px-3 py-2 text-sm font-medium transition-colors'
-                      )}
-                      aria-current={item.current ? 'page' : undefined}
-                    >
-                      {item.name}
-                    </Link>
+                {navigation.map((item) => {
+                  const isCurrent = activeNavItem === item.href
+                  return (
+                    (item.requiresAuth ? (isLoggedIn || isAdmin) : true) && (
+                      <Link
+                        key={item.name}
+                        href={item.href}
+                        className={cn(
+                          isCurrent
+                            ? 'bg-gray-800 text-white'
+                            : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                          'rounded-md px-3 py-2 text-sm font-medium transition-colors'
+                        )}
+                        aria-current={isCurrent ? 'page' : undefined}
+                      >
+                        {item.name}
+                      </Link>
+                    )
                   )
-                ))}
+                })}
               </div>
             </div>
           </div>
@@ -139,23 +160,26 @@ export function Header({ className, isLoggedIn = false, isAdmin = false }: Heade
       {mobileMenuOpen && (
         <div className="md:hidden">
           <div className="space-y-1 px-2 pb-3 pt-2 sm:px-3">
-            {navigation.map((item) => (
-              (item.requiresAuth ? (isLoggedIn || isAdmin) : true) && (
-                <Link
-                  key={item.name}
-                  href={item.href}
-                  className={cn(
-                    item.current
-                      ? 'bg-gray-900 text-white'
-                      : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-                    'block rounded-md px-3 py-2 text-base font-medium transition-colors'
-                  )}
-                  aria-current={item.current ? 'page' : undefined}
-                >
-                  {item.name}
-                </Link>
+            {navigation.map((item) => {
+              const isCurrent = activeNavItem === item.href
+              return (
+                (item.requiresAuth ? (isLoggedIn || isAdmin) : true) && (
+                  <Link
+                    key={item.name}
+                    href={item.href}
+                    className={cn(
+                      isCurrent
+                        ? 'bg-gray-900 text-white'
+                        : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                      'block rounded-md px-3 py-2 text-base font-medium transition-colors'
+                    )}
+                    aria-current={isCurrent ? 'page' : undefined}
+                  >
+                    {item.name}
+                  </Link>
+                )
               )
-            ))}
+            })}
           </div>
           <div className="border-t border-gray-700 pb-3 pt-4">
             {isLoggedIn && (