fix(BOOK-325): Added refetch options to user.name query and refactored header

Approved-by: Linus Flood
Approved-by: Matilda Landström

apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx

@@ -1,9 +1,11 @@
 "use client"
 
+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
 import { useRef } from "react"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useDropdownStore from "@/stores/main-menu"
 
@@ -46,29 +48,40 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
     return (
       <>
         <MainMenuButton
-          onClick={() => toggleMegaMenu(megaMenuTitle)}
-          className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
+          onPress={() => toggleMegaMenu(megaMenuTitle)}
+          className={styles.navigationMenuItem}
         >
-          {title}
           {isMobile ? (
-            <MaterialIcon
-              icon="arrow_forward_ios"
-              size={20}
-              className={`${styles.chevron}`}
-              color="CurrentColor"
-            />
+            <>
+              <Typography variant="Title/Subtitle/lg">
+                <span>{title}</span>
+              </Typography>
+              <MaterialIcon
+                icon="arrow_forward_ios"
+                size={20}
+                className={styles.chevron}
+                color="CurrentColor"
+              />
+            </>
           ) : (
-            <MaterialIcon
-              icon="keyboard_arrow_down"
-              size={20}
-              className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
-              color="CurrentColor"
-            />
+            <>
+              <span>{title}</span>
+              <MaterialIcon
+                icon="keyboard_arrow_down"
+                size={20}
+                className={cx(styles.chevron, {
+                  [styles.isExpanded]: isMegaMenuOpen,
+                })}
+                color="CurrentColor"
+              />
+            </>
           )}
         </MainMenuButton>
         <div
           ref={megaMenuRef}
-          className={`${styles.dropdown} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
+          className={cx(styles.dropdown, {
+            [styles.isExpanded]: isMegaMenuOpen,
+          })}
         >
           <MegaMenu
             isMobile={isMobile}
@@ -83,15 +96,17 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
     )
   } else if (link?.url) {
     return (
-      <Link
-        className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
-        variant="navigation"
-        weight="bold"
-        onClick={handleNavigate}
-        href={link.url}
+      <Typography
+        variant={isMobile ? "Title/Subtitle/lg" : "Body/Paragraph/mdBold"}
       >
-        {title}
-      </Link>
+        <NextLink
+          className={cx(styles.navigationMenuItem, styles.link)}
+          onClick={handleNavigate}
+          href={link.url}
+        >
+          {title}
+        </NextLink>
+      </Typography>
     )
   }
 

apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css

@@ -1,29 +1,28 @@
 .navigationMenuItem {
-  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
-}
-
-.navigationMenuItem.mobile {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--Space-x2) 0;
-  font-size: var(--typography-Subtitle-1-Mobile-fontSize);
+  color: var(--Text-Interactive-Default);
 }
 
 .chevron {
   transition: transform 0.3s;
-}
 
-.chevron.isExpanded {
-  transform: rotate(180deg);
+  &.isExpanded {
+    transform: rotate(180deg);
+  }
 }
 
 .dropdown {
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-Primary-Default);
   z-index: var(--menu-overlay-z-index);
   overflow: hidden;
 }
 
 @media screen and (max-width: 767px) {
+  .navigationMenuItem {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--Space-x2) 0;
+  }
+
   .dropdown {
     position: fixed;
     width: 100%;
@@ -34,13 +33,18 @@
     bottom: 0;
     transition: right 0.3s;
     overflow-y: auto;
-  }
-  .dropdown.isExpanded {
-    right: 0;
+
+    &.isExpanded {
+      right: 0;
+    }
   }
 }
 
 @media screen and (min-width: 768px) {
+  .navigationMenuItem.link {
+    padding: var(--Space-x05) 0;
+  }
+
   .dropdown {
     display: none;
     position: absolute;
@@ -51,8 +55,9 @@
     transform: translateX(-50%);
     border-radius: var(--Corner-radius-lg);
     box-shadow: var(--popup-box-shadow);
-  }
-  .dropdown.isExpanded {
-    display: grid;
+
+    &.isExpanded {
+      display: grid;
+    }
   }
 }