x

apps/spa/src/components/Navbar.tsx

@@ -86,20 +86,42 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
 
   // Keep --navbar-bottom in sync so the fixed mega-menu dropdown sits flush below the navbar
   useEffect(() => {
+    let animationFrameId: number;
+    const navElement = navRef.current;
+
     const updateNavBottom = () => {
-      if (navRef.current) {
-        const bottom = navRef.current.getBoundingClientRect().bottom
+      if (navElement) {
+        const bottom = navElement.getBoundingClientRect().bottom
         document.documentElement.style.setProperty('--navbar-bottom', `${bottom}px`)
       }
     }
+    
     updateNavBottom()
+    
     window.addEventListener('scroll', updateNavBottom, { passive: true })
     window.addEventListener('resize', updateNavBottom)
+
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = requestAnimationFrame(updateNavBottom);
+    });
+
+    if (navElement) {
+      observer.observe(navElement);
+      navElement.addEventListener('transitionend', updateNavBottom);
+    }
+    observer.observe(document.body);
+
     return () => {
       window.removeEventListener('scroll', updateNavBottom)
       window.removeEventListener('resize', updateNavBottom)
+      observer.disconnect()
+      if (navElement) {
+        navElement.removeEventListener('transitionend', updateNavBottom);
+      }
+      cancelAnimationFrame(animationFrameId);
     }
-  }, [])
+  }, [topOffsetClassName])
 
   useEffect(() => { setMobileOpen(false) }, [navigate])
   useEffect(() => {