99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { AnimatePresence } from "framer-motion";
|
|
import { useCartStore } from "@/stores/cartStore";
|
|
import { User, ShoppingBag, Menu } from "lucide-react";
|
|
import MobileMenu from "./MobileMenu";
|
|
import CartDrawer from "@/components/cart/CartDrawer";
|
|
|
|
export default function Header() {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const { items, toggleCart } = useCartStore();
|
|
|
|
const itemCount = items.reduce((count, item) => count + item.quantity, 0);
|
|
|
|
return (
|
|
<>
|
|
<header className="sticky top-10 z-40 bg-white border-b border-[#1A1A1A]/[0.06]">
|
|
<div className="max-w-[1400px] mx-auto px-6">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="lg:hidden p-2 -ml-2"
|
|
onClick={() => setMobileMenuOpen(true)}
|
|
aria-label="Open menu"
|
|
>
|
|
<Menu className="w-5 h-5" />
|
|
</button>
|
|
|
|
{/* Logo */}
|
|
<Link href="/" className="flex-shrink-0">
|
|
<Image
|
|
src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
|
|
alt="ManoonOils"
|
|
width={150}
|
|
height={40}
|
|
className="h-8 w-auto object-contain"
|
|
/>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden lg:flex items-center gap-8">
|
|
<Link
|
|
href="/products"
|
|
className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
|
|
>
|
|
Products
|
|
</Link>
|
|
<Link
|
|
href="/about"
|
|
className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
|
|
>
|
|
About
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
|
|
>
|
|
Contact
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Icons */}
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
className="p-2 hidden sm:block"
|
|
aria-label="Account"
|
|
>
|
|
<User className="w-5 h-5" />
|
|
</button>
|
|
|
|
<button
|
|
className="p-2 relative"
|
|
onClick={toggleCart}
|
|
aria-label="Open cart"
|
|
>
|
|
<ShoppingBag className="w-5 h-5" />
|
|
{itemCount > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 bg-[#1A1A1A] text-white text-[10px] w-4 h-4 rounded-full flex items-center justify-center">
|
|
{itemCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<AnimatePresence>
|
|
{mobileMenuOpen && <MobileMenu onClose={() => setMobileMenuOpen(false)} />}
|
|
</AnimatePresence>
|
|
|
|
<CartDrawer />
|
|
</>
|
|
);
|
|
}
|