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

app/globals.css

@@ -111,6 +111,7 @@
     var(--max-width-navigation)
   );
 
+  --sitewide-alert-height: 0px; /* Will be overridden when a sitewide alert is visible */
   --main-menu-mobile-height: 75px;
   --main-menu-desktop-height: 125px;
   --booking-widget-mobile-height: 75px;

components/Header/MainMenu/MobileMenu/mobileMenu.module.css

@@ -66,7 +66,9 @@
 
 .modal {
   position: fixed;
-  top: var(--main-menu-mobile-height);
+  top: calc(
+    var(--main-menu-mobile-height) + var(--sitewide-alert-height) + 1px
+  );
   right: auto;
   bottom: 0;
   width: 100%;

components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css

@@ -10,7 +10,9 @@
 
 .modal {
   position: fixed;
-  top: var(--main-menu-mobile-height);
+  top: calc(
+    var(--main-menu-mobile-height) + var(--sitewide-alert-height) + 1px
+  );
   right: auto;
   bottom: 0;
   width: 100%;

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css

@@ -27,7 +27,9 @@
   .dropdown {
     position: fixed;
     width: 100%;
-    top: var(--main-menu-mobile-height);
+    top: calc(
+      var(--main-menu-mobile-height) + var(--sitewide-alert-height) + 1px
+    );
     right: -100vw;
     bottom: 0;
     transition: right 0.3s;

components/LanguageSwitcher/languageSwitcher.module.css

@@ -13,13 +13,15 @@
   color: var(--language-switcher-color);
 }
 
-.button * {
+.button *,
+.button svg * {
   fill: var(--language-switcher-color);
 }
 .button:hover {
   color: var(--language-switcher-hover-color);
 }
-.button:hover * {
+.button:hover *,
+.button:hover svg * {
   fill: var(--language-switcher-hover-color);
 }
 
@@ -51,7 +53,9 @@
 
 .header .dropdown {
   right: -100vw;
-  top: var(--main-menu-mobile-height);
+  top: calc(
+    var(--main-menu-mobile-height) + var(--sitewide-alert-height) + 1px
+  );
   bottom: 0;
   transition: right 0.3s;
 }

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