navbar updated: added ignom componay logo and ancor link dropdown fixed based exemple web site
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -1,7 +1,8 @@
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { ChevronDown, Phone, Menu, X } from 'lucide-react';
|
||||
"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);
|
||||
@@ -19,71 +20,102 @@ export function Navbar() {
|
||||
// Prevent body scroll when mobile menu is open
|
||||
useEffect(() => {
|
||||
if (isMobileMenuOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.overflow = "hidden";
|
||||
} else {
|
||||
document.body.style.overflow = 'unset';
|
||||
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`}>
|
||||
<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="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 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>
|
||||
<span className="text-white font-bold text-lg tracking-wider">FIREFORCE</span>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation Menu */}
|
||||
<div className="hidden lg:flex items-center gap-8">
|
||||
<Link href="/" className="text-white text-sm font-semibold hover:text-red-500 transition">
|
||||
<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 font-semibold hover:text-red-500 transition">
|
||||
<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">
|
||||
<div className="relative group h-full">
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className="text-white text-sm font-semibold hover:text-red-500 transition flex items-center gap-1"
|
||||
className="text-white text-sm h-full font-semibold hover:text-red-500
|
||||
transition-colors flex items-center gap-1"
|
||||
>
|
||||
PAGES
|
||||
<ChevronDown size={16} />
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className="transition-transform group-hover:rotate-180"
|
||||
/>
|
||||
</button>
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute top-full left-0 mt-2 w-40 bg-white rounded-md shadow-lg font-semibold">
|
||||
<Link
|
||||
href="/faq"
|
||||
className="block px-4 py-2 text-black text-sm hover:bg-red-600 hover:text-white rounded-t-md"
|
||||
>
|
||||
FAQ
|
||||
</Link>
|
||||
<Link
|
||||
href="/services"
|
||||
className="block px-4 py-2 text-black text-sm hover:bg-red-600 hover:text-white rounded-b-md"
|
||||
>
|
||||
Services
|
||||
</Link>
|
||||
<Link
|
||||
href="/blog"
|
||||
className="block px-4 py-2 text-black text-sm hover:bg-red-600 hover:text-white rounded-b-md"
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 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 font-semibold hover:text-red-500 transition">
|
||||
|
||||
<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 font-semibold hover:text-red-500 transition">
|
||||
<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>
|
||||
@@ -92,8 +124,12 @@ export function Navbar() {
|
||||
<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 className="text-white text-xs font-semibold">
|
||||
Emergency Call!
|
||||
</div>
|
||||
<div className="text-white text-sm font-bold">
|
||||
+123-456-7890
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -111,7 +147,9 @@ export function Navbar() {
|
||||
{/* 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'
|
||||
isMobileMenuOpen
|
||||
? "opacity-100 pointer-events-auto"
|
||||
: "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
@@ -119,7 +157,7 @@ export function Navbar() {
|
||||
{/* 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'
|
||||
isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"
|
||||
}`}
|
||||
>
|
||||
{/* Mobile Menu Header */}
|
||||
@@ -128,7 +166,9 @@ export function Navbar() {
|
||||
<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>
|
||||
<span className="text-white font-bold text-lg tracking-wider">
|
||||
FIREFORCE
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
@@ -162,7 +202,10 @@ export function Navbar() {
|
||||
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' : ''}`} />
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={`transition-transform ${isDropdownOpen ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</button>
|
||||
{isDropdownOpen && (
|
||||
<div className="ml-4 mt-2 flex flex-col gap-2">
|
||||
@@ -202,4 +245,4 @@ export function Navbar() {
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user