'use client'; import { useEffect, useState } from 'react'; import Link from 'next/link'; import { ChevronDown, Phone, Menu, X } from 'lucide-react'; export function Navbar() { const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [scrolled, setScrolled] = useState(false); useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 50); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); // Prevent body scroll when mobile menu is open useEffect(() => { if (isMobileMenuOpen) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = 'unset'; } }, [isMobileMenuOpen]); return ( <> {/* Mobile Menu Overlay */}
setIsMobileMenuOpen(false)} /> {/* Mobile Menu Sidebar */}
{/* Mobile Menu Header */}
FIREFORCE
{/* Mobile Menu Links */}
setIsMobileMenuOpen(false)} > HOME setIsMobileMenuOpen(false)} > ABOUT {/* Mobile Pages Dropdown */}
{isDropdownOpen && (
setIsMobileMenuOpen(false)} > FAQ setIsMobileMenuOpen(false)} > Services
)}
setIsMobileMenuOpen(false)} > BLOG setIsMobileMenuOpen(false)} > CONTACT
); }