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

13
components/Current/Header/MainMenu/index.tsx
View File

@@ -18,7 +18,7 @@ import LoginButton from "../LoginButton"
import styles from "./mainMenu.module.css"
import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
import { DropdownType } from "@/types/components/dropdown/dropdown"
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
export function MainMenu({
frontpageLinkText,
@@ -62,11 +62,8 @@ export function MainMenu({
"/sv/current-content-page",
].includes(pathname)
const { toggleDropdown, openDropdown } = useDropdownStore()
const isMyPagesMobileMenuOpen =
openDropdown === DropdownType.MyPagesMobileMenu
const isHamburgerMenuOpen = openDropdown === DropdownType.HamburgerMenu
const { toggleDropdown, isMyPagesMobileMenuOpen, isHamburgerMenuOpen } =
useDropdownStore()
function handleMyPagesMobileMenuClick() {
// Only track click when opening it
@@ -74,7 +71,7 @@ export function MainMenu({
trackClick("profile picture icon")
}
toggleDropdown(DropdownType.MyPagesMobileMenu)
toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
}
return (
@@ -89,7 +86,7 @@ export function MainMenu({
<button
aria-pressed="false"
className={`${styles.expanderBtn} ${isHamburgerMenuOpen ? styles.expanded : ""}`}
onClick={() => toggleDropdown(DropdownType.HamburgerMenu)}
onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
type="button"
>
<span className={styles.iconBars}></span>

9
components/Current/Header/MyPagesMobileDropdown/index.tsx
View File

@@ -13,7 +13,7 @@ import useLang from "@/hooks/useLang"
import styles from "./my-pages-mobile-dropdown.module.css"
import { DropdownType } from "@/types/components/dropdown/dropdown"
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
@@ -24,10 +24,7 @@ export default function MyPagesMobileDropdown({
}) {
const { formatMessage } = useIntl()
const lang = useLang()
const { toggleDropdown, openDropdown } = useDropdownStore()
const isMyPagesMobileMenuOpen =
openDropdown === DropdownType.MyPagesMobileMenu
const { toggleDropdown, isMyPagesMobileMenuOpen } = useDropdownStore()
if (!navigation) {
return null
@@ -56,7 +53,7 @@ export default function MyPagesMobileDropdown({
variant="myPageMobileDropdown"
color="burgundy"
onClick={() =>
toggleDropdown(DropdownType.MyPagesMobileMenu)
toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
}
>
{link.linkText}

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}

13
components/Header/MainMenu/MyPagesMenu/index.tsx
View File

@@ -15,7 +15,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
import styles from "./myPagesMenu.module.css"
import { DropdownType } from "@/types/components/dropdown/dropdown"
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
export default function MyPagesMenu({
@@ -25,12 +25,11 @@ export default function MyPagesMenu({
}: MyPagesMenuProps) {
const intl = useIntl()
const { toggleDropdown, openDropdown } = useDropdownStore()
const isMyPagesMenuOpen = openDropdown === DropdownType.MyPagesMenu
const { toggleDropdown, isMyPagesMenuOpen } = useDropdownStore()
useHandleKeyUp((event: KeyboardEvent) => {
if (event.key === "Escape" && isMyPagesMenuOpen) {
toggleDropdown(DropdownType.MyPagesMenu)
toggleDropdown(DropdownTypeEnum.MyPagesMenu)
}
})
@@ -38,7 +37,7 @@ export default function MyPagesMenu({
<div className={styles.myPagesMenu}>
<MainMenuButton
className={styles.button}
onClick={() => toggleDropdown(DropdownType.MyPagesMenu)}
onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
>
<Avatar initials={getInitials(user.firstName, user.lastName)} />
<Subtitle type="two" className={styles.userName}>
@@ -55,7 +54,9 @@ export default function MyPagesMenu({
navigation={navigation}
user={user}
membership={membership}
toggleOpenStateFn={() => toggleDropdown(DropdownType.MyPagesMenu)}
toggleOpenStateFn={() =>
toggleDropdown(DropdownTypeEnum.MyPagesMenu)
}
/>
</div>
) : null}

12
components/Header/MainMenu/MyPagesMobileMenu/index.tsx
View File

@@ -14,7 +14,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
import styles from "./myPagesMobileMenu.module.css"
import { DropdownType } from "@/types/components/dropdown/dropdown"
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
export default function MyPagesMobileMenu({
@@ -23,13 +23,11 @@ export default function MyPagesMobileMenu({
user,
}: MyPagesMenuProps) {
const intl = useIntl()
const { openDropdown, toggleDropdown } = useDropdownStore()
const isMyPagesMobileMenuOpen =
openDropdown === DropdownType.MyPagesMobileMenu
const { isMyPagesMobileMenuOpen, toggleDropdown } = useDropdownStore()
useHandleKeyUp((event: KeyboardEvent) => {
if (event.key === "Escape" && isMyPagesMobileMenuOpen) {
toggleDropdown(DropdownType.MyPagesMobileMenu)
toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
}
})
@@ -37,7 +35,7 @@ export default function MyPagesMobileMenu({
<div className={styles.myPagesMobileMenu}>
<MainMenuButton
className={styles.button}
onClick={() => toggleDropdown(DropdownType.MyPagesMobileMenu)}
onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)}
aria-label={intl.formatMessage({ id: "Open my pages menu" })}
>
<Avatar initials={getInitials(user.firstName, user.lastName)} />
@@ -52,7 +50,7 @@ export default function MyPagesMobileMenu({
navigation={navigation}
user={user}
toggleOpenStateFn={() =>
toggleDropdown(DropdownType.MyPagesMobileMenu)
toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
}
/>
</Dialog>

6
components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
View File

@@ -13,7 +13,7 @@ import { useTrapFocus } from "@/hooks/useTrapFocus"
import styles from "./languageSwitcherContent.module.css"
import { DropdownType } from "@/types/components/dropdown/dropdown"
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
export default function LanguageSwitcherContent({
@@ -26,7 +26,9 @@ export default function LanguageSwitcherContent({
const languageSwitcherRef = useTrapFocus()
const urlKeys = Object.keys(urls) as Lang[]
const position =
type === "footer" ? DropdownType.FooterLanguage : DropdownType.HamburgerMenu
type === "footer"
? DropdownTypeEnum.FooterLanguageSwitcher
: DropdownTypeEnum.HamburgerMenu
return (
<div className={styles.languageSwitcherContent} ref={languageSwitcherRef}>

18
components/LanguageSwitcher/index.tsx
View File

@@ -14,7 +14,7 @@ import { languageSwitcherVariants } from "./variants"
import styles from "./languageSwitcher.module.css"
import { DropdownType } from "@/types/components/dropdown/dropdown"
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
export default function LanguageSwitcher({
@@ -23,18 +23,24 @@ export default function LanguageSwitcher({
}: LanguageSwitcherProps) {
const intl = useIntl()
const currentLanguage = useLang()
const { toggleDropdown, openDropdown } = useDropdownStore()
const {
toggleDropdown,
isFooterLanguageSwitcherOpen,
isHeaderLanguageSwitcherOpen,
} = useDropdownStore()
const position = type === "footer" ? "footer" : "header"
const color = type === "footer" ? "pale" : "burgundy"
const dropdownType = {
footer: DropdownType.FooterLanguage,
desktopHeader: DropdownType.HeaderLanguage,
mobileHeader: DropdownType.HeaderLanguageMobile,
footer: DropdownTypeEnum.FooterLanguageSwitcher,
desktopHeader: DropdownTypeEnum.HeaderLanguageSwitcher,
mobileHeader: DropdownTypeEnum.HeaderLanguageSwitcherMobile,
}[type]
const isLanguageSwitcherOpen = openDropdown === dropdownType
const isLanguageSwitcherOpen =
(type === "footer" && isFooterLanguageSwitcherOpen) ||
(type !== "footer" && isHeaderLanguageSwitcherOpen)
useHandleKeyUp((event: KeyboardEvent) => {
if (event.key === "Escape" && isLanguageSwitcherOpen) {

43
stores/main-menu.ts
View File

@@ -1,16 +1,43 @@
import { create } from "zustand"
import {
type DropdownState,
import type {
DropdownState,
DropdownType,
} from "@/types/components/dropdown/dropdown"
const useDropdownStore = create<DropdownState>((set) => ({
openDropdown: null,
toggleDropdown: (dropdown: DropdownType) =>
set((state) => ({
openDropdown: state.openDropdown === dropdown ? null : dropdown,
})),
// TODO: When MyPagesMobileMenu is removed, also remove the
// isMyPagesMobileMenuOpen state
const useDropdownStore = create<
DropdownState & { toggleDropdown: (dropdown: DropdownType) => void }
>((set) => ({
isHamburgerMenuOpen: false,
isMyPagesMobileMenuOpen: false,
isMyPagesMenuOpen: false,
isHeaderLanguageSwitcherOpen: false,
isHeaderLanguageSwitcherMobileOpen: false,
isFooterLanguageSwitcherOpen: false,
toggleDropdown: (dropdown) =>
set((state) => {
const newState = {
isHamburgerMenuOpen: false,
isMyPagesMobileMenuOpen: false,
isMyPagesMenuOpen: false,
isHeaderLanguageSwitcherOpen: false,
isHeaderLanguageSwitcherMobileOpen: false,
isFooterLanguageSwitcherOpen: false,
}
const currentState =
state[
`is${dropdown.charAt(0).toUpperCase() + dropdown.slice(1)}Open` as keyof DropdownState
]
newState[
`is${dropdown.charAt(0).toUpperCase() + dropdown.slice(1)}Open` as keyof DropdownState
] = !currentState
return newState
}),
}))
export default useDropdownStore

31
types/components/dropdown/dropdown.ts
View File

@@ -1,16 +1,19 @@
// TODO: When MyPagesMobileMenu is removed, also remove the
// isMyPagesMobileMenuOpen state
export enum DropdownType {
HeaderLanguage,
HeaderLanguageMobile,
FooterLanguage,
HamburgerMenu,
MyPagesMenu,
MyPagesMobileMenu,
}
export interface DropdownState {
openDropdown: DropdownType | null
toggleDropdown: (dropdown: DropdownType) => void
isHamburgerMenuOpen: boolean
isMyPagesMobileMenuOpen: boolean
isMyPagesMenuOpen: boolean
isHeaderLanguageSwitcherOpen: boolean
isHeaderLanguageSwitcherMobileOpen: boolean
isFooterLanguageSwitcherOpen: boolean
}
export enum DropdownTypeEnum {
HamburgerMenu = "hamburgerMenu",
MyPagesMobileMenu = "myPagesMobileMenu",
MyPagesMenu = "myPagesMenu",
HeaderLanguageSwitcher = "headerLanguageSwitcher",
HeaderLanguageSwitcherMobile = "headerLanguageSwitcherMobile",
FooterLanguageSwitcher = "footerLanguageSwitcher",
}
export type DropdownType = `${DropdownTypeEnum}`