Files
web/apps/scandic-web/stores/main-menu.ts
Erik Tiekstra af7c5853db Merged in fix/SW-1742-navigation-on-mobile (pull request #1436)
fix(SW-1742): fixed issue where mobile menu is not closed when clicking on a link

* fix(SW-1742): fixed issue where mobile menu is not closed when clicking on a link


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström
2025-02-27 14:20:47 +00:00

116 lines
4.4 KiB
TypeScript

import { produce } from "immer"
import { create } from "zustand"
import {
type DropdownState,
DropdownTypeEnum,
} from "@/types/components/dropdown/dropdown"
const useDropdownStore = create<DropdownState>((set) => ({
isHamburgerMenuOpen: false,
isMyPagesMobileMenuOpen: false,
isMyPagesMenuOpen: false,
isHeaderLanguageSwitcherOpen: false,
isHeaderLanguageSwitcherMobileOpen: false,
isFooterLanguageSwitcherOpen: false,
openMegaMenu: false,
toggleMegaMenu: (menu: string | false) =>
set(
produce((state: DropdownState) => {
if (state.openMegaMenu === menu) {
state.openMegaMenu = false
} else {
state.openMegaMenu = menu
}
state.isMyPagesMobileMenuOpen = false
state.isMyPagesMenuOpen = false
state.isHeaderLanguageSwitcherOpen = false
state.isHeaderLanguageSwitcherMobileOpen = false
state.isFooterLanguageSwitcherOpen = false
})
),
toggleDropdown: (dropdown: DropdownTypeEnum) =>
set(
produce((state: DropdownState) => {
const hamburgerShouldStayExpanded =
state.isMyPagesMenuOpen ||
state.isHeaderLanguageSwitcherMobileOpen ||
state.isFooterLanguageSwitcherOpen ||
!!state.openMegaMenu
switch (dropdown) {
case DropdownTypeEnum.HamburgerMenu:
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
state.isHamburgerMenuOpen = false
state.isMyPagesMenuOpen = false
state.isHeaderLanguageSwitcherOpen = false
state.isHeaderLanguageSwitcherMobileOpen = false
state.isFooterLanguageSwitcherOpen = false
state.openMegaMenu = false
break
case DropdownTypeEnum.MyPagesMenu:
state.isMyPagesMenuOpen = !state.isMyPagesMenuOpen
state.isHamburgerMenuOpen = false
state.isMyPagesMobileMenuOpen = false
state.isHeaderLanguageSwitcherOpen = false
state.isHeaderLanguageSwitcherMobileOpen = false
state.isFooterLanguageSwitcherOpen = false
state.openMegaMenu = false
break
case DropdownTypeEnum.HeaderLanguageSwitcher:
state.isHeaderLanguageSwitcherOpen =
!state.isHeaderLanguageSwitcherOpen
state.isHamburgerMenuOpen = false
state.isMyPagesMobileMenuOpen = false
state.isMyPagesMenuOpen = false
state.isHeaderLanguageSwitcherMobileOpen = false
state.isFooterLanguageSwitcherOpen = false
state.openMegaMenu = false
break
case DropdownTypeEnum.HeaderLanguageSwitcherMobile:
state.isHeaderLanguageSwitcherMobileOpen =
!state.isHeaderLanguageSwitcherMobileOpen
state.isMyPagesMobileMenuOpen = false
state.isMyPagesMenuOpen = false
state.isHeaderLanguageSwitcherOpen = false
state.isFooterLanguageSwitcherOpen = false
state.openMegaMenu = false
break
case DropdownTypeEnum.FooterLanguageSwitcher:
state.isFooterLanguageSwitcherOpen =
!state.isFooterLanguageSwitcherOpen
state.isHamburgerMenuOpen = false
state.isMyPagesMobileMenuOpen = false
state.isMyPagesMenuOpen = false
state.isHeaderLanguageSwitcherOpen = false
state.isHeaderLanguageSwitcherMobileOpen = false
state.openMegaMenu = false
if (state.isFooterLanguageSwitcherOpen) {
document.body.classList.add("overflow-hidden")
} else {
document.body.classList.remove("overflow-hidden")
}
break
}
})
),
}))
export default useDropdownStore