Vula Builder
68 lines
4.6 KiB
TypeScript
68 lines
4.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Leaf, Menu, ShoppingBag, ShoppingCart, X } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { useMedusaCart } from '@/hooks/useMedusaCart';
|
|
|
|
export default function Navigation() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const { itemCount } = useMedusaCart();
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<style>{`html { scroll-behavior: smooth; }`}</style>
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex h-16 items-center justify-between">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
|
|
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground flex-shrink-0">
|
|
<Leaf className="h-4 w-4" />
|
|
</div>
|
|
<span className="font-serif text-xl font-bold text-foreground">Ndlovu Naturals</span>
|
|
</Link>
|
|
|
|
{/* Desktop nav */}
|
|
<nav className="hidden md:flex items-center gap-6">
|
|
<Link href="/" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Home</Link>
|
|
<a href="#indigenous-botanicals" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Indigenous Botanicals Story</a>
|
|
<a href="#bestselling-botanicals" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Bestselling Botanicals Grid</a>
|
|
<a href="#rooted-moments-gallery" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Rooted Moments Gallery</a>
|
|
<a href="#connect-with-us" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Connect With Us</a>
|
|
<a href="#visit-pretoria-oasis" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Visit Our Pretoria Oasis</a>
|
|
<Link href="/products" className="bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">Products</Link>
|
|
<button onClick={() => window.dispatchEvent(new CustomEvent('cart-drawer-open'))} aria-label="Open cart" className="relative text-foreground/80 hover:text-primary transition-colors p-1">
|
|
<ShoppingCart className="h-5 w-5" />
|
|
{itemCount > 0 && (
|
|
<span className="absolute -top-2 -right-2 bg-primary text-primary-foreground text-xs rounded-full h-4 w-4 flex items-center justify-center font-bold leading-none">{itemCount > 9 ? '9+' : itemCount}</span>
|
|
)}
|
|
</button>
|
|
</nav>
|
|
|
|
{/* Mobile toggle */}
|
|
<button
|
|
className="md:hidden p-2 rounded-md text-foreground hover:bg-muted transition-colors"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
aria-label="Toggle menu"
|
|
>
|
|
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile nav */}
|
|
{isOpen && (
|
|
<div className="md:hidden border-t py-4 space-y-1 px-2">
|
|
<Link href="/" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Home</Link>
|
|
<a href="#indigenous-botanicals" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Indigenous Botanicals Story</a>
|
|
<a href="#bestselling-botanicals" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Bestselling Botanicals Grid</a>
|
|
<a href="#rooted-moments-gallery" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Rooted Moments Gallery</a>
|
|
<a href="#connect-with-us" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Connect With Us</a>
|
|
<a href="#visit-pretoria-oasis" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Visit Our Pretoria Oasis</a>
|
|
<Link href="/products" className="block px-3 py-2 rounded-lg bg-primary text-primary-foreground font-medium" onClick={() => setIsOpen(false)}>Products</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|