115 lines
3.8 KiB
TypeScript
115 lines
3.8 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { logout } from "@/constants/routes/handleAuth"
|
|
import { myPages } from "@/constants/routes/myPages"
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import { ArrowRightIcon, ChevronDownIcon } from "@/components/Icons"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import useLang from "@/hooks/useLang"
|
|
import { getInitials } from "@/utils/user"
|
|
|
|
import MainMenuButton from "../MainMenuButton"
|
|
import Avatar from "./Avatar"
|
|
|
|
import styles from "./myPagesMenu.module.css"
|
|
|
|
import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
|
|
|
|
// This component is mostly the same as MyPagesMobileDropdown, but with a
|
|
// different name and some different styles. Should probably be refactored in
|
|
// a later stage to fit the design from Figma better.
|
|
|
|
export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const { toggleMyPagesMenu, isMyPagesMenuOpen } = useDropdownStore()
|
|
|
|
if (!navigation) {
|
|
return null
|
|
}
|
|
|
|
return user ? (
|
|
<div className={styles.myPagesMenu}>
|
|
<MainMenuButton className={styles.button} onClick={toggleMyPagesMenu}>
|
|
<Avatar initials={getInitials(user.firstName, user.lastName)} />
|
|
<span className={styles.userName}>
|
|
{intl.formatMessage({ id: "Hi" })} {user.firstName}!
|
|
</span>
|
|
<ChevronDownIcon
|
|
className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
|
|
color="red"
|
|
/>
|
|
</MainMenuButton>
|
|
<nav
|
|
className={`${styles.dropdown} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
|
|
>
|
|
{/* TODO: Get information from API/ContentStack, check with design team if this information is needed here. */}
|
|
<div className={styles.friendTypeWrapper}>
|
|
<span className={styles.friendType}>Loyal friend</span>
|
|
<span className={styles.friendPoints}>12 350 points</span>
|
|
</div>
|
|
|
|
<ul className={styles.groups}>
|
|
{navigation.menuItems.map((menuItem, idx) => (
|
|
<li
|
|
key={`${menuItem.display_sign_out_link}-${idx}`}
|
|
className={styles.group}
|
|
>
|
|
<ul className={styles.menuItems}>
|
|
{menuItem.links.map((link) => (
|
|
<li key={link.uid}>
|
|
<Link
|
|
href={link.originalUrl || link.url}
|
|
partialMatch
|
|
size={
|
|
menuItem.display_sign_out_link ? "small" : "regular"
|
|
}
|
|
variant="myPageMobileDropdown"
|
|
color="burgundy"
|
|
onClick={toggleMyPagesMenu}
|
|
className={styles.link}
|
|
>
|
|
{link.linkText}
|
|
<ArrowRightIcon
|
|
className={styles.arrow}
|
|
color="burgundy"
|
|
/>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
{menuItem.display_sign_out_link && lang ? (
|
|
<li>
|
|
<Link
|
|
href={logout[lang]}
|
|
prefetch={false}
|
|
size="small"
|
|
color="burgundy"
|
|
variant="myPageMobileDropdown"
|
|
>
|
|
{intl.formatMessage({ id: "Log out" })}
|
|
</Link>
|
|
</li>
|
|
) : null}
|
|
</ul>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
) : (
|
|
<Link
|
|
href={myPages[lang]}
|
|
className={styles.loginLink}
|
|
aria-label={intl.formatMessage({ id: "Log in/Join" })}
|
|
>
|
|
<Avatar />
|
|
<span className={styles.userName}>
|
|
{intl.formatMessage({ id: "Log in/Join" })}
|
|
</span>
|
|
</Link>
|
|
)
|
|
}
|