Merged in feat/SW-1339-mobile-navigation (pull request #1178)

feat(SW-1339): Now supporting sitewide alert height to decide the position of the navigation menus

* feat(SW-1339): Now supporting sitewide alert height to decide the position of the navigation menus


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström

components/SitewideAlert/Client.tsx

@@ -1,11 +1,12 @@
 "use client"
 
-import { useRef } from "react"
+import { useCallback, useEffect, useRef } from "react"
 
 import { StickyElementNameEnum } from "@/stores/sticky-position"
 
 import Alert from "@/components/TempDesignSystem/Alert"
 import useStickyPosition from "@/hooks/useStickyPosition"
+import { debounce } from "@/utils/debounce"
 
 import styles from "./sitewideAlert.module.css"
 
@@ -13,16 +14,45 @@ import { AlertTypeEnum } from "@/types/enums/alert"
 import type { SitewideAlertProps } from "./sitewideAlert"
 
 export default function SiteWideAlertClient({ alert }: SitewideAlertProps) {
-  const alertRef = useRef(null)
+  const alertRef = useRef<HTMLDivElement>(null)
+  const isAlarm = alert.type === AlertTypeEnum.Alarm
   useStickyPosition({
-    ref: alertRef,
+    ref: isAlarm ? alertRef : undefined,
     name: StickyElementNameEnum.SITEWIDE_ALERT,
   })
-  const isAlarm = alert.type === AlertTypeEnum.Alarm
+
+  const updateHeight = useCallback(() => {
+    if (alertRef.current) {
+      const height = alertRef.current.offsetHeight
+      document.documentElement.style.setProperty(
+        "--sitewide-alert-height",
+        `${height}px`
+      )
+    }
+  }, [])
+
+  useEffect(() => {
+    const alertElement = alertRef.current
+    const debouncedResizeHandler = debounce(() => {
+      updateHeight()
+    }, 100)
+    const observer = new ResizeObserver(debouncedResizeHandler)
+
+    if (alertElement) {
+      observer.observe(alertElement)
+    }
+
+    return () => {
+      if (alertElement) {
+        observer.unobserve(alertElement)
+      }
+      observer.disconnect()
+    }
+  }, [updateHeight])
 
   return (
     <div
-      ref={isAlarm ? alertRef : null}
+      ref={alertRef}
       className={`${styles.sitewideAlert} ${isAlarm ? styles.alarm : ""}`}
     >
       <Alert