diff --git a/components/Current/Header/MainMenu/index.tsx b/components/Current/Header/MainMenu/index.tsx index eed0317ee..c3ec15ab5 100644 --- a/components/Current/Header/MainMenu/index.tsx +++ b/components/Current/Header/MainMenu/index.tsx @@ -18,6 +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" export function MainMenu({ frontpageLinkText, @@ -61,12 +62,11 @@ export function MainMenu({ "/sv/current-content-page", ].includes(pathname) - const { - isHamburgerMenuOpen, - isMyPagesMobileMenuOpen, - toggleHamburgerMenu, - toggleMyPagesMobileMenu, - } = useDropdownStore() + const { toggleDropdown, openDropdown } = useDropdownStore() + + const isMyPagesMobileMenuOpen = + openDropdown === DropdownType.MyPagesMobileMenu + const isHamburgerMenuOpen = openDropdown === DropdownType.HamburgerMenu function handleMyPagesMobileMenuClick() { // Only track click when opening it @@ -74,7 +74,7 @@ export function MainMenu({ trackClick("profile picture icon") } - toggleMyPagesMobileMenu() + toggleDropdown(DropdownType.MyPagesMobileMenu) } return ( @@ -89,7 +89,7 @@ export function MainMenu({ - + { if (event.key === "Escape" && isMyPagesMenuOpen) { - toggleMyPagesMenu() + toggleDropdown(DropdownType.MyPagesMenu) } }) return (
- + toggleDropdown(DropdownType.MyPagesMenu)} + > {intl.formatMessage({ id: "Hi" })} {user.firstName}! @@ -51,7 +55,7 @@ export default function MyPagesMenu({ navigation={navigation} user={user} membership={membership} - toggleOpenStateFn={toggleMyPagesMenu} + toggleOpenStateFn={() => toggleDropdown(DropdownType.MyPagesMenu)} />
) : null} diff --git a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx index 29a8023a1..f540b9eb2 100644 --- a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx +++ b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx @@ -14,6 +14,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent" import styles from "./myPagesMobileMenu.module.css" +import { DropdownType } from "@/types/components/dropdown/dropdown" import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu" export default function MyPagesMobileMenu({ @@ -22,12 +23,13 @@ export default function MyPagesMobileMenu({ user, }: MyPagesMenuProps) { const intl = useIntl() - const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } = - useDropdownStore() + const { openDropdown, toggleDropdown } = useDropdownStore() + const isMyPagesMobileMenuOpen = + openDropdown === DropdownType.MyPagesMobileMenu useHandleKeyUp((event: KeyboardEvent) => { if (event.key === "Escape" && isMyPagesMobileMenuOpen) { - toggleMyPagesMobileMenu() + toggleDropdown(DropdownType.MyPagesMobileMenu) } }) @@ -35,7 +37,7 @@ export default function MyPagesMobileMenu({
toggleDropdown(DropdownType.MyPagesMobileMenu)} aria-label={intl.formatMessage({ id: "Open my pages menu" })} > @@ -49,7 +51,9 @@ export default function MyPagesMobileMenu({ membership={membership} navigation={navigation} user={user} - toggleOpenStateFn={toggleMyPagesMobileMenu} + toggleOpenStateFn={() => + toggleDropdown(DropdownType.MyPagesMobileMenu) + } />
diff --git a/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx b/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx index 4406c4fd5..8aeee7067 100644 --- a/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx +++ b/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx @@ -13,6 +13,7 @@ import { useTrapFocus } from "@/hooks/useTrapFocus" import styles from "./languageSwitcherContent.module.css" +import { DropdownType } from "@/types/components/dropdown/dropdown" import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher" export default function LanguageSwitcherContent({ @@ -21,10 +22,13 @@ export default function LanguageSwitcherContent({ }: LanguageSwitcherProps) { const intl = useIntl() const currentLanguage = useLang() - const { toggleLanguageSwitcher } = useDropdownStore() + const { toggleDropdown } = useDropdownStore() const languageSwitcherRef = useTrapFocus() const urlKeys = Object.keys(urls) as Lang[] - const position = type === "footer" ? "footer" : "header" + const position = + type === "footer" + ? DropdownType.FooterLanguage + : DropdownType.HeaderLanguage return (
@@ -33,7 +37,7 @@ export default function LanguageSwitcherContent({