feat(SW-272) implemented mobile design

stores/main-menu.ts

@@ -6,9 +6,6 @@ import {
   DropdownTypeEnum,
 } from "@/types/components/dropdown/dropdown"
 
-// TODO: When MyPagesMobileMenu is removed, also remove the
-// isMyPagesMobileMenuOpen state
-
 const useDropdownStore = create<DropdownState>((set, get) => ({
   isHamburgerMenuOpen: false,
   isMyPagesMobileMenuOpen: false,
@@ -17,21 +14,6 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
   isHeaderLanguageSwitcherMobileOpen: false,
   isFooterLanguageSwitcherOpen: false,
   openMegaMenu: false,
-  handleHamburgerClick: () => {
-    const state = get()
-    if (state.isMyPagesMobileMenuOpen) {
-      set({ isMyPagesMobileMenuOpen: false })
-    } else {
-      if (state.isHeaderLanguageSwitcherMobileOpen) {
-        set({ isHeaderLanguageSwitcherMobileOpen: false })
-      }
-      if (!state.isFooterLanguageSwitcherOpen) {
-        set({ isHamburgerMenuOpen: !state.isHamburgerMenuOpen })
-      } else {
-        set({ isFooterLanguageSwitcherOpen: false })
-      }
-    }
-  },
   toggleMegaMenu: (menu: string | false) =>
     set(
       produce((state: DropdownState) => {
@@ -40,7 +22,6 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
         } else {
           state.openMegaMenu = menu
         }
-        state.isHamburgerMenuOpen = false
         state.isMyPagesMobileMenuOpen = false
         state.isMyPagesMenuOpen = false
         state.isHeaderLanguageSwitcherOpen = false
@@ -51,16 +32,28 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
   toggleDropdown: (dropdown: DropdownTypeEnum) =>
     set(
       produce((state: DropdownState) => {
-        state.openMegaMenu = false
+        const hamburgerShouldStayExpanded =
+          state.isMyPagesMenuOpen ||
+          state.isHeaderLanguageSwitcherMobileOpen ||
+          state.isFooterLanguageSwitcherOpen ||
+          !!state.openMegaMenu
 
         switch (dropdown) {
           case DropdownTypeEnum.HamburgerMenu:
-            state.isHamburgerMenuOpen = !state.isHamburgerMenuOpen
-            state.isMyPagesMobileMenuOpen = false
-            state.isMyPagesMenuOpen = false
-            state.isHeaderLanguageSwitcherOpen = false
-            state.isHeaderLanguageSwitcherMobileOpen = false
-            state.isFooterLanguageSwitcherOpen = false
+            if (state.isHamburgerMenuOpen) {
+              if (hamburgerShouldStayExpanded) {
+                state.isMyPagesMobileMenuOpen = false
+                state.isHeaderLanguageSwitcherMobileOpen = false
+                state.isFooterLanguageSwitcherOpen = false
+                state.openMegaMenu = false
+              } else {
+                state.isHamburgerMenuOpen = false
+              }
+            } else if (state.isMyPagesMobileMenuOpen) {
+              state.isMyPagesMobileMenuOpen = false
+            } else {
+              state.isHamburgerMenuOpen = true
+            }
             break
           case DropdownTypeEnum.MyPagesMobileMenu:
             state.isMyPagesMobileMenuOpen = !state.isMyPagesMobileMenuOpen
@@ -69,6 +62,7 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
             state.isHeaderLanguageSwitcherOpen = false
             state.isHeaderLanguageSwitcherMobileOpen = false
             state.isFooterLanguageSwitcherOpen = false
+            state.openMegaMenu = false
             break
           case DropdownTypeEnum.MyPagesMenu:
             state.isMyPagesMenuOpen = !state.isMyPagesMenuOpen
@@ -77,6 +71,7 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
             state.isHeaderLanguageSwitcherOpen = false
             state.isHeaderLanguageSwitcherMobileOpen = false
             state.isFooterLanguageSwitcherOpen = false
+            state.openMegaMenu = false
             break
           case DropdownTypeEnum.HeaderLanguageSwitcher:
             state.isHeaderLanguageSwitcherOpen =
@@ -86,15 +81,16 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
             state.isMyPagesMenuOpen = false
             state.isHeaderLanguageSwitcherMobileOpen = false
             state.isFooterLanguageSwitcherOpen = false
+            state.openMegaMenu = false
             break
           case DropdownTypeEnum.HeaderLanguageSwitcherMobile:
             state.isHeaderLanguageSwitcherMobileOpen =
               !state.isHeaderLanguageSwitcherMobileOpen
-            state.isHamburgerMenuOpen = false
             state.isMyPagesMobileMenuOpen = false
             state.isMyPagesMenuOpen = false
             state.isHeaderLanguageSwitcherOpen = false
             state.isFooterLanguageSwitcherOpen = false
+            state.openMegaMenu = false
             break
           case DropdownTypeEnum.FooterLanguageSwitcher:
             state.isFooterLanguageSwitcherOpen =
@@ -104,6 +100,7 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
             state.isMyPagesMenuOpen = false
             state.isHeaderLanguageSwitcherOpen = false
             state.isHeaderLanguageSwitcherMobileOpen = false
+            state.openMegaMenu = false
             if (state.isFooterLanguageSwitcherOpen) {
               document.body.classList.add("overflow-hidden")
             } else {
@@ -116,42 +113,3 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
 }))
 
 export default useDropdownStore
-
-const error = [
-  {
-    query: {
-      hotelId: "698",
-      params: { hotelId: "698", language: "En", include: "RoomCategories" },
-    },
-  },
-  {
-    query: { lang: "en" },
-    error: {
-      issues: [
-        {
-          code: "invalid_type",
-          expected: "object",
-          received: "undefined",
-          path: [
-            "all_header",
-            "items",
-            0,
-            "menu_items",
-            0,
-            "submenu",
-            0,
-            "links",
-            0,
-            "linkConnection",
-            "edges",
-            0,
-            "node",
-            "web",
-          ],
-          message: "Required",
-        },
-      ],
-      name: "ZodError",
-    },
-  },
-]