x

apps/website/src/components/Navbar.tsx

@@ -14,10 +14,12 @@ import { useLang } from '../hooks/useLang'
 import { DesktopMegaMenu } from './navigation/DesktopMegaMenu'
 import { MobileDrawer } from './navigation/MobileDrawer'
 import type { MegaMenuPayload } from './navigation/menuTypes'
+import type { StoreSettings } from '@homaroma/types'
 
 interface NavbarProps {
   categories?: Category[]
   initialMenu?: MegaMenuPayload[]
+  settings?: StoreSettings | null
 }
 
 const LANGUAGES = [
@@ -60,7 +62,7 @@ function createFallbackMenu(categories: Category[]): MegaMenuPayload[] {
   ]
 }
 
-export default function Navbar({ categories = [], initialMenu = [] }: NavbarProps) {
+export default function Navbar({ categories = [], initialMenu = [], settings = null }: NavbarProps) {
   const [searchOpen, setSearchOpen] = useState(false)
   const [mobileOpen, setMobileOpen] = useState(false)
   const [langSheetOpen, setLangSheetOpen] = useState(false)
@@ -143,6 +145,7 @@ export default function Navbar({ categories = [], initialMenu = [] }: NavbarProp
 
   const iconButtonClass = 'rounded-full p-1.5 text-pop-black/65 transition-all hover:bg-pop-bg hover:text-pop-pink md:p-2'
   const activeLanguage = LANGUAGES.find((language) => lang.startsWith(language.code) || language.code.startsWith(lang)) ?? LANGUAGES[0]
+  const brandName = settings?.brandName || 'HomAroma'
 
   return (
     <>
@@ -161,7 +164,7 @@ export default function Navbar({ categories = [], initialMenu = [] }: NavbarProp
               onClick={() => setMobileOpen(false)}
               className="shrink-0 text-xl font-bold uppercase italic tracking-widest text-pop-black md:text-2xl"
             >
-              HomAroma <span className="hidden text-xs font-light not-italic text-pop-black/55 md:inline md:text-sm">Essential</span>
+              {brandName} <span className="hidden text-xs font-light not-italic text-pop-black/55 md:inline md:text-sm">Essential</span>
             </Link>
           </div>