'use client' import { useState, ReactNode, useEffect, useRef } from 'react' import { usePathname, useRouter } from 'next/navigation' import Link from 'next/link' import { Menu, X, ChevronDown } from 'lucide-react' import Image from 'next/image' interface NavBarProps { children: ReactNode; isSignedIn: boolean; inputProjects: any; } export default function NavBar({ children, isSignedIn, inputProjects }: NavBarProps) { const [projects, setProjects] = useState(inputProjects) const [isDropdownOpen, setIsDropdownOpen] = useState(false) const router = useRouter() const dropdownRef = useRef(null) const pathname = usePathname() const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) // Check if we're on the homepage, contact page, or blog pages const isPinkBackground = pathname === '/' || pathname === '/contactus' || pathname.startsWith('/blog') // Add useEffect to sync state when inputProjects changes useEffect(() => { setProjects(inputProjects) }, [inputProjects]) useEffect(() => { function handleClickOutside(event: MouseEvent) { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setIsDropdownOpen(false) } } document.addEventListener('mousedown', handleClickOutside) return () => { document.removeEventListener('mousedown', handleClickOutside) } }, []) return ( <> {children} ) }