249 lines
8.7 KiB
TypeScript
249 lines
8.7 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { ChevronDown, Phone, Menu, X } from "lucide-react";
|
|
import Image from "next/image";
|
|
|
|
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 (
|
|
<>
|
|
<nav
|
|
className={`fixed top-0 left-0 right-0 z-50 border-b border-gray-400/50 ${scrolled && "bg-black"} transition`}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-20">
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-2 rounded-xl flex items-center justify-center">
|
|
<Image
|
|
src="/images/IGNUM/PNG/1.@6x.png"
|
|
alt="logo image"
|
|
width={70}
|
|
height={70}
|
|
className=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop Navigation Menu */}
|
|
<div className="hidden h-full lg:flex items-center gap-8">
|
|
<Link
|
|
href="/"
|
|
className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
|
>
|
|
HOME
|
|
</Link>
|
|
<Link
|
|
href="/about"
|
|
className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
|
>
|
|
ABOUT
|
|
</Link>
|
|
|
|
{/* Pages Dropdown */}
|
|
<div className="relative group h-full">
|
|
<button
|
|
className="text-white text-sm h-full font-semibold hover:text-red-500
|
|
transition-colors flex items-center gap-1"
|
|
>
|
|
PAGES
|
|
<ChevronDown
|
|
size={16}
|
|
className="transition-transform group-hover:rotate-180"
|
|
/>
|
|
</button>
|
|
|
|
{/* Dropdown Menu */}
|
|
<div
|
|
className="absolute top-full left-0 w-40 bg-white rounded-b-md shadow-lg
|
|
font-semibold opacity-0 invisible group-hover:opacity-100
|
|
group-hover:visible transition-all duration-300
|
|
transform translate-y-2 group-hover:translate-y-0
|
|
pointer-events-none group-hover:pointer-events-auto"
|
|
>
|
|
<Link
|
|
href="/faq"
|
|
className="block px-4 py-2 text-black text-sm hover:bg-red-600
|
|
hover:text-white transition-colors"
|
|
>
|
|
FAQ
|
|
</Link>
|
|
<Link
|
|
href="/services"
|
|
className="block px-4 py-2 text-black text-sm hover:bg-red-600
|
|
hover:text-white transition-colors"
|
|
>
|
|
Services
|
|
</Link>
|
|
<Link
|
|
href="/blog"
|
|
className="block px-4 py-2 text-black text-sm hover:bg-red-600
|
|
hover:text-white transition-colors rounded-b-md"
|
|
>
|
|
Blog
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<Link
|
|
href="/products"
|
|
className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
|
>
|
|
Products
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
|
|
>
|
|
CONTACT
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Emergency Call Button - Hidden on mobile */}
|
|
<div className="hidden lg:flex items-center gap-3 bg-red-600 px-4 py-2 rounded-full">
|
|
<Phone size={20} className="text-white" />
|
|
<div>
|
|
<div className="text-white text-xs font-semibold">
|
|
Emergency Call!
|
|
</div>
|
|
<div className="text-white text-sm font-bold">
|
|
+123-456-7890
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
onClick={() => setIsMobileMenuOpen(true)}
|
|
className="lg:hidden text-white p-2 hover:bg-red-600 rounded-md transition"
|
|
>
|
|
<Menu size={24} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Mobile Menu Overlay */}
|
|
<div
|
|
className={`fixed inset-0 bg-black/50 z-50 transition-opacity duration-300 lg:hidden ${
|
|
isMobileMenuOpen
|
|
? "opacity-100 pointer-events-auto"
|
|
: "opacity-0 pointer-events-none"
|
|
}`}
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
/>
|
|
|
|
{/* Mobile Menu Sidebar */}
|
|
<div
|
|
className={`fixed top-0 left-0 bottom-0 w-80 bg-black z-50 transform transition-transform duration-300 ease-in-out lg:hidden ${
|
|
isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"
|
|
}`}
|
|
>
|
|
{/* Mobile Menu Header */}
|
|
<div className="flex justify-between items-center p-6 border-b border-gray-700">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center">
|
|
<div className="w-6 h-6 bg-white rounded-full"></div>
|
|
</div>
|
|
<span className="text-white font-bold text-lg tracking-wider">
|
|
FIREFORCE
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
className="text-white p-2 hover:bg-red-600 rounded-md transition"
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu Links */}
|
|
<div className="flex flex-col p-6 gap-4">
|
|
<Link
|
|
href="/"
|
|
className="text-white text-base font-semibold hover:text-red-500 transition py-2"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
HOME
|
|
</Link>
|
|
<Link
|
|
href="/about"
|
|
className="text-white text-base font-semibold hover:text-red-500 transition py-2"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
ABOUT
|
|
</Link>
|
|
|
|
{/* Mobile Pages Dropdown */}
|
|
<div>
|
|
<button
|
|
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
|
className="text-white text-base font-semibold hover:text-red-500 transition flex items-center gap-1 py-2 w-full"
|
|
>
|
|
PAGES
|
|
<ChevronDown
|
|
size={16}
|
|
className={`transition-transform ${isDropdownOpen ? "rotate-180" : ""}`}
|
|
/>
|
|
</button>
|
|
{isDropdownOpen && (
|
|
<div className="ml-4 mt-2 flex flex-col gap-2">
|
|
<Link
|
|
href="/faq"
|
|
className="text-white/80 text-sm hover:text-red-500 transition py-2"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
FAQ
|
|
</Link>
|
|
<Link
|
|
href="/services"
|
|
className="text-white/80 text-sm hover:text-red-500 transition py-2"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
Services
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Link
|
|
href="/blog"
|
|
className="text-white text-base font-semibold hover:text-red-500 transition py-2"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
BLOG
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="text-white text-base font-semibold hover:text-red-500 transition py-2"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
CONTACT
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|