Add conditional link for logged in user and administrator

components/ui/header.tsx

@@ -7,16 +7,21 @@ import { useState } from "react"
 
 interface HeaderProps {
   className?: string
+  isLoggedIn?: boolean
+  isAdmin?: boolean
 }
 
 const navigation = [
-  { name: 'Dashboard', href: '/dashboard', current: true },
+  { name: 'Home', href: '/', current: false, requiresAuth: false },
-  { name: 'Projects', href: '/projects', current: false },
+  { name: 'Pricing', href: '/pricing', current: false, requiresAuth: false },
-  { name: 'Calendar', href: '/calendar', current: false },
+  { name: 'FAQ', href: '/faq', current: false, requiresAuth: false },
-  { name: 'Reports', href: '/reports', current: 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)
 
@@ -37,6 +42,7 @@ export function Header({ className }: HeaderProps) {
             <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}
@@ -50,11 +56,13 @@ export function Header({ className }: HeaderProps) {
                     >
                       {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 +110,7 @@ export function Header({ className }: HeaderProps) {
                 </div>
               </div>
             </div>
+          )}
 
           <div className="-mr-2 flex md:hidden">
             {/* Mobile menu button */}
@@ -131,6 +140,7 @@ export function Header({ className }: HeaderProps) {
         <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}
@@ -144,9 +154,12 @@ export function Header({ className }: HeaderProps) {
                 >
                   {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 +195,8 @@ export function Header({ className }: HeaderProps) {
                   </Link>
                 </div>
               </div>
+            )}
+          </div>
         </div>
       )}
     </header>