x

apps/website/src/components/Navbar.tsx

@@ -177,12 +177,31 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
   const activeLanguage = LANGUAGES.find((language) => lang.startsWith(language.code) || language.code.startsWith(lang)) ?? LANGUAGES[0]
   const brandName = settings?.brandName || ''
 
+  const [productStickyVisible, setProductStickyVisible] = useState(false)
+
+  useEffect(() => {
+    const handleStickyChange = (e: Event) => {
+      const customEvent = e as CustomEvent<boolean>
+      if (typeof customEvent.detail === 'boolean') {
+        setProductStickyVisible(customEvent.detail)
+      } else {
+        setProductStickyVisible(document.documentElement.dataset.productStickyVisible === 'true')
+      }
+    }
+
+    setProductStickyVisible(document.documentElement.dataset.productStickyVisible === 'true')
+    window.addEventListener('product-sticky-change', handleStickyChange)
+    return () => window.removeEventListener('product-sticky-change', handleStickyChange)
+  }, [])
+
   const isHome = getPathWithoutLocale(pathname) === '/'
   const isTransparent = isHome && !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 hideDesktopHeader =
+    (!isCommercePath && scrollingDown && !mobileOpen && !searchOpen && !langSheetOpen) ||
+    (productStickyVisible && !mobileOpen && !searchOpen && !langSheetOpen)
 
   useEffect(() => {
     setIsClientReady(true)

apps/website/src/components/ProductStickyPurchaseBar.tsx

@@ -72,10 +72,20 @@ export default function ProductStickyPurchaseBar({
       const trigger = document.getElementById(triggerId)
       if (!trigger) {
         setIsVisible(false)
+        if (document.documentElement.dataset.productStickyVisible !== 'false') {
+          document.documentElement.dataset.productStickyVisible = 'false'
+          window.dispatchEvent(new CustomEvent('product-sticky-change', { detail: false }))
+        }
         return
       }
 
-      setIsVisible(trigger.getBoundingClientRect().top <= 0)
+      const nextVisible = trigger.getBoundingClientRect().top <= 0
+      setIsVisible(nextVisible)
+      const nextStr = nextVisible ? 'true' : 'false'
+      if (document.documentElement.dataset.productStickyVisible !== nextStr) {
+        document.documentElement.dataset.productStickyVisible = nextStr
+        window.dispatchEvent(new CustomEvent('product-sticky-change', { detail: nextVisible }))
+      }
     }
 
     updateVisibility()
@@ -83,6 +93,8 @@ export default function ProductStickyPurchaseBar({
     window.addEventListener('resize', updateVisibility)
 
     return () => {
+      document.documentElement.dataset.productStickyVisible = 'false'
+      window.dispatchEvent(new CustomEvent('product-sticky-change', { detail: false }))
       window.removeEventListener('scroll', updateVisibility)
       window.removeEventListener('resize', updateVisibility)
     }