Merged master into fix/SW-1107-alert-on-current-header

components/Current/Header/MainMenu/index.tsx

@@ -9,6 +9,7 @@ import useDropdownStore from "@/stores/main-menu"
 import Image from "@/components/Image"
 import LoginButton from "@/components/LoginButton"
 import Avatar from "@/components/MyPages/Avatar"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { trackClick } from "@/utils/tracking"
@@ -227,3 +228,56 @@ export function MainMenu({
     </div>
   )
 }
+
+export function MainMenuSkeleton() {
+  const intl = useIntl()
+
+  const links = new Array(5).fill("")
+  return (
+    <div className={styles.mainMenu}>
+      <div
+        className={styles.container}
+        itemScope
+        itemType="http://schema.org/Organization"
+      >
+        <meta itemProp="name" content="Scandic" />
+        <nav className={styles.navBar}>
+          <button
+            aria-pressed="false"
+            className={styles.expanderBtn}
+            type="button"
+          >
+            <span className={styles.iconBars}></span>
+            <span className={styles.hiddenAccessible}>Menu</span>
+          </button>
+
+          <a className={styles.logoLink} href={""}>
+            <Image
+              alt="Scandic Hotels logo"
+              className={styles.logo}
+              data-js="scandiclogoimg"
+              itemProp="logo"
+              height={20}
+              src={"/_static/img/scandic-logotype.png"}
+              width={200}
+            />
+          </a>
+
+          <ul className={styles.listWrapper}>
+            {links.map((link, i) => (
+              <li
+                className={`${styles.li} ${styles.skeletonWrapper}`}
+                key={link.href + i}
+              >
+                <SkeletonShimmer height="22px" width="130px" />
+              </li>
+            ))}
+          </ul>
+          <div className={styles.buttonContainer}>
+            <BookingButton href={""} />
+          </div>
+        </nav>
+      </div>
+    </div>
+  )
+}

components/Current/Header/MainMenu/mainMenu.module.css

@@ -24,11 +24,9 @@
 .navBar {
   display: grid;
   grid-template-columns: 1fr 80px 1fr;
-  grid-template-columns: auto auto 1fr auto;
   grid-template-areas: "expanderBtn logoLink . buttonContainer";
   grid-template-rows: 100%;
   height: 100%;
-  padding: 0 var(--Spacing-x2);
 }
 
 .expanderBtn {
@@ -47,7 +45,7 @@
   background: #757575;
   border-radius: 2.3px;
   display: inline-block;
-  height: 3px;
+  height: 5px;
   position: relative;
   transition: 0.3s;
   width: 32px;
@@ -104,7 +102,6 @@
   align-items: center;
   height: 100%;
   width: 80px;
-  padding-left: var(--Spacing-x1);
 }
 
 .logo {
@@ -238,6 +235,12 @@
   display: none;
 }
 
+.skeletonWrapper {
+  padding: 4px 10px;
+  height: 100%;
+  align-content: center;
+}
+
 @media (min-width: 1367px) {
   .navBar {
     grid-template-columns: 140px auto 1fr;