scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(sw-187): Refactor dropdown to keep more logic in main-menu.ts

Browse Source
This commit is contained in:
Pontus Dreij
2024-09-11 11:41:26 +02:00
parent 76c7cfa6f0
commit 2734af5f3f
9 changed files with 104 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/Header/MainMenu/MobileMenu/index.tsx
View File

@@ -14,7 +14,7 @@ import NavigationMenu from "../NavigationMenu"
import styles from "./mobileMenu.module.css"
import { DropdownType } from "@/types/components/dropdown/dropdown"
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
export default function MobileMenu({
@@ -23,35 +23,31 @@ export default function MobileMenu({
topLink,
}: MobileMenuProps) {
const intl = useIntl()
const { toggleDropdown, openDropdown } = useDropdownStore()
const isHamburgerMenuOpen =
openDropdown === DropdownType.HamburgerMenu ||
openDropdown === DropdownType.HeaderLanguageMobile
const isMyPagesMobileMenuOpen =
openDropdown === DropdownType.MyPagesMobileMenu
const isHeaderLanguageSwitcherOpen =
openDropdown === DropdownType.HeaderLanguageMobile
const isFooterLanguageSwitcherOpen =
openDropdown === DropdownType.FooterLanguage
const {
toggleDropdown,
isHamburgerMenuOpen,
isMyPagesMobileMenuOpen,
isHeaderLanguageSwitcherMobileOpen,
isFooterLanguageSwitcherOpen,
} = useDropdownStore()
useHandleKeyUp((event: KeyboardEvent) => {
if (event.key === "Escape" && isHamburgerMenuOpen) {
toggleDropdown(DropdownType.HamburgerMenu)
toggleDropdown(DropdownTypeEnum.HamburgerMenu)
}
})
function handleHamburgerClick() {
if (isMyPagesMobileMenuOpen) {
toggleDropdown(DropdownType.MyPagesMobileMenu)
toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
} else {
if (isHeaderLanguageSwitcherOpen) {
toggleDropdown(DropdownType.HeaderLanguageMobile)
if (isHeaderLanguageSwitcherMobileOpen) {
toggleDropdown(DropdownTypeEnum.HeaderLanguageSwitcherMobile)
}
if (!isFooterLanguageSwitcherOpen) {
toggleDropdown(DropdownType.HamburgerMenu)
toggleDropdown(DropdownTypeEnum.HamburgerMenu)
} else {
toggleDropdown(DropdownType.FooterLanguage)
toggleDropdown(DropdownTypeEnum.FooterLanguageSwitcher)
}
}
}
@@ -60,7 +56,7 @@ export default function MobileMenu({
<>
<button
type="button"
className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen || isFooterLanguageSwitcherOpen ? styles.isExpanded : ""}`}
className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen || isFooterLanguageSwitcherOpen || isHeaderLanguageSwitcherMobileOpen ? styles.isExpanded : ""}`}
aria-label={intl.formatMessage({
id: isHamburgerMenuOpen ? "Close menu" : "Open menu",
})}
@@ -70,7 +66,7 @@ export default function MobileMenu({
</button>
<Modal
className={styles.modal}
isOpen={isHamburgerMenuOpen || isHeaderLanguageSwitcherOpen}
isOpen={isHamburgerMenuOpen || isHeaderLanguageSwitcherMobileOpen}
>
<Dialog
className={styles.dialog}