x

apps/spa/src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { Link, NavLink, useNavigate } from 'react-router-dom'
 import { useState, useEffect } from 'react'
-import type { Category } from '../types'
+import { API_BASE, type Category, type MenuItem } from '../types'
 import { ShoppingBag, MapPin, Menu as MenuIcon, X, Heart } from 'lucide-react'
 import { useCartStore } from '../store/cartStore'
 import { useWishlistStore } from '../store/wishlistStore'
@@ -20,6 +20,7 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
   const [scrolled, setScrolled] = useState(false)
   const [localOrdersCount, setLocalOrdersCount] = useState(0)
   const [hasAnnouncement, setHasAnnouncement] = useState(false)
+  const [menuItems, setMenuItems] = useState<MenuItem[]>([])
   const navigate = useNavigate()
   
   const { toggleCart, getCartCount } = useCartStore()
@@ -56,6 +57,19 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
       try { setLocalOrdersCount(JSON.parse(stored).length) } catch (e) {}
     }
     
+    // Fetch dynamic menu
+    fetch(`${API_BASE}/menus/main`)
+      .then(res => {
+        if (!res.ok) throw new Error('Menu not found')
+        return res.json()
+      })
+      .then(data => {
+        if (data && data.items) {
+          setMenuItems(data.items.sort((a: any, b: any) => a.order - b.order))
+        }
+      })
+      .catch(console.error)
+    
     return () => {
       window.removeEventListener('scroll', onScroll)
       clearTimeout(timer)
@@ -104,9 +118,19 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
 
         {/* ── DESKTOP NAV ── */}
         <div className="hidden md:flex space-x-7 text-sm font-medium tracking-wide uppercase">
-          <NavLink to="/" end className={navLinkClass}>{t('nav.home')}</NavLink>
-          <NavLink to="/shop" className={navLinkClass}>{t('nav.shop')}</NavLink>
-          <NavLink to="/coupons" className={navLinkClass}>🔥 {t('nav.promotions') || 'Promotions'}</NavLink>
+          {menuItems.length > 0 ? (
+            menuItems.map(item => (
+              <NavLink key={item.id} to={item.url} end={item.url === '/'} className={navLinkClass}>
+                {item.label}
+              </NavLink>
+            ))
+          ) : (
+            <>
+              <NavLink to="/" end className={navLinkClass}>{t('nav.home')}</NavLink>
+              <NavLink to="/shop" className={navLinkClass}>{t('nav.shop')}</NavLink>
+              <NavLink to="/coupons" className={navLinkClass}>🔥 {t('nav.promotions') || 'Promotions'}</NavLink>
+            </>
+          )}
 
           {/* Collections dropdown */}
           {categories.length > 0 && (
@@ -136,8 +160,12 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
             </div>
           )}
 
-          <NavLink to="/scent-guide" className={navLinkClass}>{t('nav.scentGuide')}</NavLink>
-          <NavLink to="/about" className={navLinkClass}>{t('nav.about')}</NavLink>
+          {menuItems.length === 0 && (
+            <>
+              <NavLink to="/scent-guide" className={navLinkClass}>{t('nav.scentGuide')}</NavLink>
+              <NavLink to="/about" className={navLinkClass}>{t('nav.about')}</NavLink>
+            </>
+          )}
         </div>
 
         {/* ── DESKTOP RIGHT ACTIONS ── */}
@@ -362,7 +390,10 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
 
           {/* Drawer Nav Links */}
           <div className="flex-1 overflow-y-auto px-4 py-6 space-y-1">
-            {[
+            {(menuItems.length > 0 ? [
+              ...menuItems.map(item => ({ to: item.url, label: item.label, end: item.url === '/' })),
+              ...(customer ? [{ to: '/profile', label: `👤 ${t('nav.profile') || 'My Profile'}` }] : []),
+            ] : [
               { to: '/', label: t('nav.home'), end: true },
               { to: '/shop', label: t('nav.shop') },
               ...(customer ? [{ to: '/profile', label: `👤 ${t('nav.profile') || 'My Profile'}` }] : []),
@@ -371,7 +402,7 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
               { to: '/about', label: t('nav.about') },
               { to: '/faq', label: t('nav.faq') },
               { to: '/contact', label: t('nav.contact') },
-            ].map(item => (
+            ]).map((item: any) => (
               <NavLink
                 key={item.to}
                 to={item.to}