119 lines
3.7 KiB
TypeScript
119 lines
3.7 KiB
TypeScript
import { create } from "zustand"
|
|
|
|
// TODO: When MyPagesMobileMenu is removed, also remove the
|
|
// isMyPagesMobileMenuOpen state and toggleMyPagesMobileMenu function
|
|
interface DropdownState {
|
|
isHamburgerMenuOpen: boolean
|
|
isMyPagesMobileMenuOpen: boolean
|
|
isMyPagesMenuOpen: boolean
|
|
isHeaderLanguageSwitcherOpen: boolean
|
|
isFooterLanguageSwitcherOpen: boolean
|
|
toggleHamburgerMenu: () => void
|
|
toggleMyPagesMobileMenu: () => void
|
|
toggleMyPagesMenu: () => void
|
|
toggleLanguageSwitcher: (location: "header" | "footer") => void
|
|
}
|
|
|
|
const useDropdownStore = create<DropdownState>((set) => ({
|
|
isHamburgerMenuOpen: false,
|
|
isMyPagesMobileMenuOpen: false,
|
|
isMyPagesMenuOpen: false,
|
|
isHeaderLanguageSwitcherOpen: false,
|
|
isFooterLanguageSwitcherOpen: false,
|
|
toggleHamburgerMenu: () =>
|
|
set(
|
|
({ isHamburgerMenuOpen, isMyPagesMenuOpen, isMyPagesMobileMenuOpen }) => {
|
|
// Close the other dropdowns if they're open
|
|
if (!isHamburgerMenuOpen) {
|
|
if (isMyPagesMenuOpen) {
|
|
set({ isMyPagesMenuOpen: false })
|
|
}
|
|
if (isMyPagesMobileMenuOpen) {
|
|
set({ isMyPagesMobileMenuOpen: false })
|
|
}
|
|
}
|
|
return { isHamburgerMenuOpen: !isHamburgerMenuOpen }
|
|
}
|
|
),
|
|
toggleMyPagesMobileMenu: () =>
|
|
set(
|
|
({
|
|
isMyPagesMenuOpen,
|
|
isMyPagesMobileMenuOpen,
|
|
isHamburgerMenuOpen,
|
|
isHeaderLanguageSwitcherOpen,
|
|
isFooterLanguageSwitcherOpen,
|
|
}) => {
|
|
// Close the other dropdowns if they're open
|
|
if (!isMyPagesMobileMenuOpen) {
|
|
if (isMyPagesMenuOpen) {
|
|
set({ isMyPagesMenuOpen: false })
|
|
}
|
|
if (isHamburgerMenuOpen) {
|
|
set({ isHamburgerMenuOpen: false })
|
|
}
|
|
if (isHeaderLanguageSwitcherOpen) {
|
|
set({ isHeaderLanguageSwitcherOpen: false })
|
|
}
|
|
if (isFooterLanguageSwitcherOpen) {
|
|
set({ isFooterLanguageSwitcherOpen: false })
|
|
}
|
|
}
|
|
return { isMyPagesMobileMenuOpen: !isMyPagesMobileMenuOpen }
|
|
}
|
|
),
|
|
toggleMyPagesMenu: () =>
|
|
set(
|
|
({
|
|
isHamburgerMenuOpen,
|
|
isHeaderLanguageSwitcherOpen,
|
|
isFooterLanguageSwitcherOpen,
|
|
isMyPagesMenuOpen,
|
|
isMyPagesMobileMenuOpen,
|
|
}) => {
|
|
// Close the other dropdowns if they're open
|
|
if (!isMyPagesMenuOpen) {
|
|
if (isHamburgerMenuOpen) {
|
|
set({ isHamburgerMenuOpen: false })
|
|
}
|
|
if (isMyPagesMobileMenuOpen) {
|
|
set({ isMyPagesMobileMenuOpen: false })
|
|
}
|
|
if (isHeaderLanguageSwitcherOpen) {
|
|
set({ isHeaderLanguageSwitcherOpen: false })
|
|
}
|
|
if (isFooterLanguageSwitcherOpen) {
|
|
set({ isFooterLanguageSwitcherOpen: false })
|
|
}
|
|
}
|
|
return { isMyPagesMenuOpen: !isMyPagesMenuOpen }
|
|
}
|
|
),
|
|
toggleLanguageSwitcher: (location: "header" | "footer") =>
|
|
set((state) => {
|
|
const isCurrentlyOpen =
|
|
location === "header"
|
|
? state.isHeaderLanguageSwitcherOpen
|
|
: state.isFooterLanguageSwitcherOpen
|
|
|
|
if (!isCurrentlyOpen) {
|
|
return {
|
|
isHeaderLanguageSwitcherOpen: location === "header",
|
|
isFooterLanguageSwitcherOpen: location === "footer",
|
|
isMyPagesMenuOpen: false,
|
|
isMyPagesMobileMenuOpen: false,
|
|
isHamburgerMenuOpen: false,
|
|
}
|
|
}
|
|
|
|
return {
|
|
isHeaderLanguageSwitcherOpen:
|
|
location === "header" ? false : state.isHeaderLanguageSwitcherOpen,
|
|
isFooterLanguageSwitcherOpen:
|
|
location === "footer" ? false : state.isFooterLanguageSwitcherOpen,
|
|
}
|
|
}),
|
|
}))
|
|
|
|
export default useDropdownStore
|