61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { Dialog, Modal } from "react-aria-components"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
|
|
import { getInitials } from "@/utils/user"
|
|
|
|
import Avatar from "../Avatar"
|
|
import MainMenuButton from "../MainMenuButton"
|
|
import MyPagesMenuContent from "../MyPagesMenuContent"
|
|
|
|
import styles from "./myPagesMobileMenu.module.css"
|
|
|
|
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
|
|
import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
|
|
|
|
export default function MyPagesMobileMenu({
|
|
membership,
|
|
navigation,
|
|
user,
|
|
}: MyPagesMenuProps) {
|
|
const intl = useIntl()
|
|
const { isMyPagesMobileMenuOpen, toggleDropdown } = useDropdownStore()
|
|
|
|
useHandleKeyUp((event: KeyboardEvent) => {
|
|
if (event.key === "Escape" && isMyPagesMobileMenuOpen) {
|
|
toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div className={styles.myPagesMobileMenu}>
|
|
<MainMenuButton
|
|
className={styles.button}
|
|
onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)}
|
|
aria-label={intl.formatMessage({ id: "Open my pages menu" })}
|
|
>
|
|
<Avatar initials={getInitials(user.firstName, user.lastName)} />
|
|
</MainMenuButton>
|
|
<Modal className={styles.modal} isOpen={isMyPagesMobileMenuOpen}>
|
|
<Dialog
|
|
className={styles.dialog}
|
|
aria-label={intl.formatMessage({ id: "My pages menu" })}
|
|
>
|
|
<MyPagesMenuContent
|
|
membership={membership}
|
|
navigation={navigation}
|
|
user={user}
|
|
toggleOpenStateFn={() =>
|
|
toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
|
|
}
|
|
/>
|
|
</Dialog>
|
|
</Modal>
|
|
</div>
|
|
)
|
|
}
|