x

apps/spa/src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { Link, useNavigate } from 'react-router-dom'
 import { useState, useEffect, useRef } from 'react'
-import { type Category } from '../types'
+import { API_BASE, type Category, type StoreSettings } from '../types'
 import { ShoppingBag, Menu as MenuIcon, X, Heart, Globe, Check } from 'lucide-react'
 import { useCartStore } from '../store/cartStore'
 import { useWishlistStore } from '../store/wishlistStore'
@@ -26,6 +26,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
   const [searchQuery, setSearchQuery] = useState('')
   const [scrolled, setScrolled] = useState(false)
   const [hasAnnouncement, setHasAnnouncement] = useState(false)
+  const [settings, setSettings] = useState<StoreSettings | null>(null)
   const navigate = useNavigate()
   
   const { toggleCart, getCartCount } = useCartStore()
@@ -74,6 +75,15 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
     }
   }, [fetchMegaMenu])
 
+  useEffect(() => {
+    fetch(`${API_BASE}/settings`)
+      .then((response) => (response.ok ? response.json() : null))
+      .then((data: StoreSettings | null) => {
+        if (data) setSettings(data)
+      })
+      .catch((error) => console.error('Failed to fetch store settings', error))
+  }, [])
+
   // Keep --navbar-bottom in sync so the fixed mega-menu dropdown sits flush below the navbar
   useEffect(() => {
     const updateNavBottom = () => {
@@ -112,6 +122,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
     : (hasAnnouncement ? 'top-[32px] md:top-[40px]' : 'top-0')
 
   const finalTopClassName = scrolled ? 'top-0' : computedOffset
+  const brandName = settings?.brandName || 'HomAroma'
 
   return (
     <>
@@ -127,7 +138,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
           {/* Left: Logo */}
           <div className="flex items-center shrink-0">
             <Link to="/" onClick={() => setMobileOpen(false)} className="text-xl md:text-2xl font-bold tracking-widest text-spa-forest uppercase italic shrink-0">
-              HomAroma <span className="hidden md:inline text-spa-stone text-xs md:text-sm not-italic font-light ml-1">Essential</span>
+              {brandName} <span className="hidden md:inline text-spa-stone text-xs md:text-sm not-italic font-light ml-1">Essential</span>
             </Link>
           </div>