diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
index db0fc28..6644c2d 100644
--- a/apps/website/src/components/Navbar.tsx
+++ b/apps/website/src/components/Navbar.tsx
@@ -211,12 +211,27 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
}, [pathname])
const isHome = getPathWithoutLocale(pathname) === '/'
- const isTransparent = (isHome || isHeroFirst || Boolean(isTransparentPage)) && !scrolled && !mobileOpen && !searchOpen && !langSheetOpen
+ const isTransparent = (isHeroFirst || Boolean(isTransparentPage)) && !scrolled && !mobileOpen && !searchOpen && !langSheetOpen
const pathWithoutLocale = getPathWithoutLocale(pathname)
- const isCommercePath = ['/shop', '/products', '/category', '/cart', '/checkout', '/wishlist', '/profile', '/order', '/track']
- .some((route) => pathWithoutLocale === route || pathWithoutLocale.startsWith(`${route}/`))
- const hideDesktopHeader =
- (!isCommercePath && scrollingDown && !mobileOpen && !searchOpen && !langSheetOpen) ||
+ const headerBehavior =
+ (settings?.themeTokens as any)?.headerBehavior ||
+ settings?.headerBehavior ||
+ 'hide_on_scroll'
+ const mobileHeaderBehavior =
+ (settings?.themeTokens as any)?.mobileHeaderBehavior ||
+ settings?.mobileHeaderBehavior ||
+ headerBehavior
+ const mobileHeaderStyle =
+ (settings?.themeTokens as any)?.mobileHeaderStyle ||
+ settings?.mobileHeaderStyle ||
+ 'logo_center'
+
+ const isDesktopView = isClientReady && canRenderDesktopMenu
+ const activeHeaderBehavior = isDesktopView ? headerBehavior : mobileHeaderBehavior
+ const isHideOnScroll = activeHeaderBehavior === 'hide_on_scroll'
+ const isCheckout = pathWithoutLocale === '/checkout' || pathWithoutLocale.startsWith('/checkout/')
+ const hideHeader =
+ (!isCheckout && isHideOnScroll && scrollingDown && !mobileOpen && !searchOpen && !langSheetOpen) ||
(productStickyVisible && !mobileOpen && !searchOpen && !langSheetOpen)
useEffect(() => {
@@ -233,6 +248,138 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
const isTwoTier = settings?.headerStyle === 'two_tier'
+ const renderMobileActionButtons = (includeSearch = true) => (
+
+ {includeSearch && (
+
+ )}
+
+ setMobileOpen(false)}
+ className={`relative ${iconButtonClass}`}
+ aria-label="Wishlist"
+ >
+
+ {wishlistCount > 0 && (
+
+ {wishlistCount}
+
+ )}
+
+
+
+
+ )
+
+ const renderMobileHamburger = () => (
+
+ )
+
+ const renderMobileNavbar = () => {
+ if (mobileHeaderStyle === 'logo_left') {
+ return (
+
+
+ setMobileOpen(false)} className="ui-brand-wordmark">
+ {settings?.logoUrl ? (
+
+ ) : (
+ {brandName}
+ )}
+
+
+
+ {renderMobileActionButtons(true)}
+ {renderMobileHamburger()}
+
+
+ )
+ }
+
+ if (mobileHeaderStyle === 'search_bar_below') {
+ return (
+
+
+
+ setMobileOpen(false)} className="ui-brand-wordmark">
+ {settings?.logoUrl ? (
+
+ ) : (
+ {brandName}
+ )}
+
+
+
+ {renderMobileActionButtons(false)}
+ {renderMobileHamburger()}
+
+
+
+
+ )
+ }
+
+ // Default: 'logo_center'
+ return (
+
+
+ {renderMobileHamburger()}
+
+
+ setMobileOpen(false)} className="ui-brand-wordmark text-center">
+ {settings?.logoUrl ? (
+
+ ) : (
+ {brandName}
+ )}
+
+
+
+ {renderMobileActionButtons(true)}
+
+
+ )
+ }
+
return (
<>
+
+
+