chore: cleanup
This commit is contained in:
Erik Tiekstra
@@ -0,0 +1,16 @@
|
||||
.avatar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: var(--Main-Grey-40);
|
||||
}
|
||||
|
||||
.initials {
|
||||
font-size: 0.75rem;
|
||||
color: var(--Base-Text-Inverted);
|
||||
background-color: var(--Scandic-Peach-70);
|
||||
}
|
||||
19
components/Header/MainMenu/MyPagesMenu/Avatar/index.tsx
Normal file
19
components/Header/MainMenu/MyPagesMenu/Avatar/index.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { PersonIcon } from "@/components/Icons"
|
||||
import Image from "@/components/Image"
|
||||
|
||||
import styles from "./avatar.module.css"
|
||||
|
||||
import { AvatarProps } from "@/types/components/header/avatar"
|
||||
|
||||
export default function Avatar({ image, initials }: AvatarProps) {
|
||||
let classNames = [styles.avatar]
|
||||
let element = <PersonIcon color="white" />
|
||||
if (image) {
|
||||
classNames.push(styles.image)
|
||||
element = <Image src={image.src} alt={image.alt} width={28} height={28} />
|
||||
} else if (initials) {
|
||||
classNames.push(styles.initials)
|
||||
element = <span>{initials}</span>
|
||||
}
|
||||
return <span className={classNames.join(" ")}>{element}</span>
|
||||
}
|
||||
@@ -1,24 +1,29 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { logout } from "@/constants/routes/handleAuth"
|
||||
import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
|
||||
import { myPages } from "@/constants/routes/myPages"
|
||||
import useDropdownStore from "@/stores/main-menu"
|
||||
|
||||
import { ArrowRightIcon } from "@/components/Icons"
|
||||
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"
|
||||
|
||||
type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
|
||||
import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
|
||||
|
||||
export default function MyPagesMenu({
|
||||
navigation,
|
||||
}: {
|
||||
navigation: Navigation
|
||||
}) {
|
||||
const { formatMessage } = useIntl()
|
||||
// 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 { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
|
||||
useDropdownStore()
|
||||
@@ -27,55 +32,79 @@ export default function MyPagesMenu({
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`${styles.myPagesMenu} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
|
||||
>
|
||||
<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}`}
|
||||
id={`${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={toggleMyPagesMobileMenu}
|
||||
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"
|
||||
>
|
||||
{formatMessage({ id: "Log out" })}
|
||||
</Link>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
return user ? (
|
||||
<>
|
||||
<MainMenuButton
|
||||
className={styles.button}
|
||||
onClick={toggleMyPagesMobileMenu}
|
||||
>
|
||||
<Avatar initials={getInitials(user.firstName, user.lastName)} />
|
||||
{intl.formatMessage({ id: "Hi" })} {user.firstName}!
|
||||
<ChevronDownIcon
|
||||
className={`${styles.chevron} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
|
||||
color="red"
|
||||
/>
|
||||
</MainMenuButton>
|
||||
<nav
|
||||
className={`${styles.myPagesMenu} ${isMyPagesMobileMenuOpen ? 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={toggleMyPagesMobileMenu}
|
||||
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>
|
||||
</>
|
||||
) : (
|
||||
<Link href={myPages[lang]} className={styles.link}>
|
||||
<Avatar />
|
||||
{intl.formatMessage({ id: "Log in/Join" })}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,3 +1,15 @@
|
||||
.button {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.chevron.isExpanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.myPagesMenu {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
@@ -5,7 +17,7 @@
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
padding: var(--Spacing-x2) var(--Spacing-x4);
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
box-shadow: 0px 0px 14px 6px #0000001a;
|
||||
box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user