In the header make use of next/navigation to get the path name and display current link

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) => (
+                {navigation.map((item) => {
+                  const isCurrent = activeNavItem === item.href
+                  return (
                     (item.requiresAuth ? (isLoggedIn || isAdmin) : true) && (
                       <Link
                         key={item.name}
                         href={item.href}
                         className={cn(
-                        item.current
+                          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={item.current ? 'page' : undefined}
+                        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) => (
+            {navigation.map((item) => {
+              const isCurrent = activeNavItem === item.href
+              return (
                 (item.requiresAuth ? (isLoggedIn || isAdmin) : true) && (
                   <Link
                     key={item.name}
                     href={item.href}
                     className={cn(
-                    item.current
+                      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={item.current ? 'page' : undefined}
+                    aria-current={isCurrent ? 'page' : undefined}
                   >
                     {item.name}
                   </Link>
                 )
-            ))}
+              )
+            })}
           </div>
           <div className="border-t border-gray-700 pb-3 pt-4">
             {isLoggedIn && (