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

components/ui/header.tsx

@@ -3,22 +3,45 @@
 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
+  isLoggedIn?: boolean
+  isAdmin?: boolean
 }
 
 const navigation = [
-  { name: 'Dashboard', href: '/dashboard', current: true },
-  { name: 'Projects', href: '/projects', current: false },
-  { name: 'Calendar', href: '/calendar', current: false },
-  { name: 'Reports', href: '/reports', current: false },
+  { name: 'Home', href: '/', current: false, requiresAuth: false },
+  { name: 'Pricing', href: '/pricing', current: false, requiresAuth: false },
+  { name: 'FAQ', href: '/faq', current: false, requiresAuth: false },
+  { name: 'Dashboard', href: '/dashboard', current: false, requiresAuth: false },
+  { name: 'Projects', href: '/projects', current: false, requiresAuth: true },
+  { name: 'Calendar', href: '/calendar', current: false, requiresAuth: false },
+  { name: 'Reports', href: '/reports', current: false, requiresAuth: true },
 ]
 
-export function Header({ className }: HeaderProps) {
+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)}>
@@ -36,25 +59,31 @@ export function Header({ className }: HeaderProps) {
             </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>
 
+          {isLoggedIn && (
             <div className="hidden md:block">
               <div className="ml-4 flex items-center md:ml-6">
                 <button
@@ -102,6 +131,7 @@ export function Header({ className }: HeaderProps) {
                 </div>
               </div>
             </div>
+          )}
 
           <div className="-mr-2 flex md:hidden">
             {/* Mobile menu button */}
@@ -130,23 +160,30 @@ export function Header({ className }: HeaderProps) {
       {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 && (
+              <div>
                 <div className="flex items-center px-5">
                   <div className="flex-shrink-0">
                     <img
@@ -182,6 +219,8 @@ export function Header({ className }: HeaderProps) {
                   </Link>
                 </div>
               </div>
+            )}
+          </div>
         </div>
       )}
     </header>