x

apps/spa/src/components/DynamicAnnouncementBar.tsx

@@ -16,7 +16,7 @@ export default function DynamicAnnouncementBar({ payload }: DynamicAnnouncementB
 
   return (
     <div 
-      className="w-full py-2.5 px-4 text-center text-[10px] sm:text-xs tracking-[0.2em] font-semibold uppercase relative z-30 overflow-hidden"
+      className="announcement-bar w-full py-2.5 px-4 text-center text-[10px] sm:text-xs tracking-[0.2em] font-semibold uppercase relative z-30 overflow-hidden"
       style={{ backgroundColor, color: textColor }}
     >
       <Swiper

apps/spa/src/components/Navbar.tsx

@@ -19,6 +19,7 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
   const [searchQuery, setSearchQuery] = useState('')
   const [scrolled, setScrolled] = useState(false)
   const [localOrdersCount, setLocalOrdersCount] = useState(0)
+  const [hasAnnouncement, setHasAnnouncement] = useState(false)
   const navigate = useNavigate()
   
   const { toggleCart, getCartCount } = useCartStore()
@@ -33,9 +34,20 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
     localStorage.setItem('homaroma_lang', newLang)
   }
 
-  // Detect scroll for navbar bg change
+  // Detect scroll and announcement bar presence
   useEffect(() => {
-    const onScroll = () => setScrolled(window.scrollY > 20)
+    const checkAnnouncement = () => {
+      const el = document.querySelector('.announcement-bar')
+      setHasAnnouncement(!!el)
+    }
+    
+    checkAnnouncement()
+    const timer = setTimeout(checkAnnouncement, 300)
+
+    const onScroll = () => {
+      setScrolled(window.scrollY > 20)
+      checkAnnouncement()
+    }
     window.addEventListener('scroll', onScroll, { passive: true })
     
     // Check local orders periodically (or just on mount)
@@ -44,7 +56,10 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
       try { setLocalOrdersCount(JSON.parse(stored).length) } catch (e) {}
     }
     
-    return () => window.removeEventListener('scroll', onScroll)
+    return () => {
+      window.removeEventListener('scroll', onScroll)
+      clearTimeout(timer)
+    }
   }, [])
 
   // Close mobile menu on route change
@@ -68,11 +83,17 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
   const navLinkClass = ({ isActive }: { isActive: boolean }) =>
     isActive ? 'text-spa-forest font-semibold' : 'text-spa-stone hover:text-spa-forest transition-colors'
 
+  const computedOffset = topOffsetClassName !== 'top-0' 
+    ? topOffsetClassName 
+    : (hasAnnouncement ? 'top-[32px] md:top-[40px]' : 'top-0')
+
+  const finalTopClassName = scrolled ? 'top-0' : computedOffset
+
   return (
     <>
       {/* ── NAVBAR BAR ── */}
       <nav
-        className={`fixed ${topOffsetClassName} w-full z-50 transition-all duration-300 px-4 md:px-6 py-3.5 md:py-4 flex justify-between items-center bg-white/80 backdrop-blur-xl border-b border-black/5 ${
+        className={`fixed ${finalTopClassName} w-full z-50 transition-all duration-300 px-4 md:px-6 py-3.5 md:py-4 flex justify-between items-center bg-white/80 backdrop-blur-xl border-b border-black/5 ${
           scrolled ? 'shadow-lg shadow-black/5' : 'shadow-none'
         }`}
       >