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/MobileMenu/index.tsx

@@ -1,7 +1,8 @@
 "use client"
 
+import { cx } from "class-variance-authority"
 import { useEffect } from "react"
-import { Dialog, Modal } from "react-aria-components"
+import { Button as ButtonRAC, Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
@@ -75,16 +76,21 @@ export default function MobileMenu({
 
   const findMyBookingUrl = findMyBookingRoutes[lang]
 
+  function handleLinkClick() {
+    toggleDropdown(DropdownTypeEnum.HamburgerMenu)
+  }
+
   return (
     <>
-      <button
-        type="button"
-        className={`${styles.hamburger} ${isHamburgerExtended ? styles.isExpanded : ""}`}
+      <ButtonRAC
+        className={cx(styles.hamburger, {
+          [styles.isExpanded]: isHamburgerExtended,
+        })}
         aria-label={isHamburgerExtended ? closeMsg : openMsg}
-        onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
+        onPress={handleLinkClick}
       >
         <span className={styles.bar} />
-      </button>
+      </ButtonRAC>
       <Modal className={styles.modal} isOpen={isHamburgerMenuOpen}>
         <Dialog
           className={styles.dialog}
@@ -98,17 +104,23 @@ export default function MobileMenu({
             <HeaderLink
               href={findMyBookingUrl}
               iconName={IconName.Search}
-              onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
+              onClick={handleLinkClick}
             >
               {intl.formatMessage({
                 id: "booking.findBooking",
                 defaultMessage: "Find booking",
               })}
             </HeaderLink>
-            <TopLink isLoggedIn={isLoggedIn} topLink={topLink} iconSize={20} />
+            <TopLink
+              isLoggedIn={isLoggedIn}
+              topLink={topLink}
+              iconSize={20}
+              onClick={handleLinkClick}
+            />
             <HeaderLink
               href={customerService[lang]}
               iconName={IconName.Service}
+              onClick={handleLinkClick}
             >
               {intl.formatMessage({
                 id: "common.customerService",