Deploy

src/components/layout/Navigation.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useState } from 'react';
+import { Menu, X, UtensilsCrossed, ShoppingCart, User } from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useVulaCart } from '@/hooks/useVulaCart';
+import { useCustomerAuth } from '@/hooks/useCustomerAuth';
+
+export default function Navigation() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { itemCount } = useVulaCart();
+  const { isAuthenticated } = useCustomerAuth();
+
+  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>
+      <style>{":root{--vula-nav-h:4rem}"}</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">
+            <Image src="https://uploads.vulai.co.za/vula-uploads/8d47e87d-1a0f-46c1-870e-9311e4b6fc34/library/0c92066010a2855a8ddd13f17f809b37ef2135d86709e1b2cdf610623e971ab7.png" alt="Ben's Noodle House logo" width={0} height={0} sizes="264px" className="h-11 w-auto object-contain flex-shrink-0" priority />
+            <span className="font-serif text-xl font-bold text-foreground">Ben's Noodle{" "}<span className="text-accent">House</span></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 whitespace-nowrap">Home</Link>
+            <a href="#our-noodle-story" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium whitespace-nowrap">About</a>
+            <a href="#food-venue-gallery" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium whitespace-nowrap">Gallery</a>
+            <a href="#visit-the-wok" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium whitespace-nowrap">Contact</a>
+            <Link href="/menu" className="bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium whitespace-nowrap">Order Online</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>
+            <Link href={isAuthenticated ? '/account/orders' : '/account/login'} aria-label="My account" className="text-foreground/80 hover:text-primary transition-colors p-1">
+              <User className="h-5 w-5" />
+            </Link>
+          </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="#our-noodle-story" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>About</a>
+              <a href="#food-venue-gallery" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Gallery</a>
+              <a href="#visit-the-wok" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Contact</a>
+              <Link href="/menu" className="block px-3 py-2 rounded-lg bg-primary text-primary-foreground font-medium" onClick={() => setIsOpen(false)}>Order Online</Link>
+              <Link href={isAuthenticated ? '/account/orders' : '/account/login'} className="flex items-center gap-2 px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>
+                <User className="h-4 w-4" />
+                <span className="text-sm font-medium">My Account</span>
+              </Link>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}