feat(SW-184): added menu buttons and my pages menu

components/Header/MainMenu/MyPages/Avatar/avatar.module.css

@@ -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);
+}

components/Header/MainMenu/MyPages/Avatar/avatar.ts

@@ -0,0 +1,6 @@
+import { ImageProps } from "next/image"
+
+export interface AvatarProps {
+  image?: ImageProps
+  initials?: string | null
+}

components/Header/MainMenu/MyPages/Avatar/index.tsx

@@ -0,0 +1,19 @@
+import { PersonIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+
+import { AvatarProps } from "./avatar"
+
+import styles from "./avatar.module.css"
+
+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>
+}

components/Header/MainMenu/MyPages/index.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import Link from "next/link"
+import { useIntl } from "react-intl"
+
+import { myPages } from "@/constants/routes/myPages"
+import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
+import useDropdownStore from "@/stores/main-menu"
+
+import { ChevronDownIcon } from "@/components/Icons"
+import useLang from "@/hooks/useLang"
+import { getInitials } from "@/utils/user"
+
+import MenuButton from "../MenuButton"
+import MyPagesMenu from "../MyPagesMenu"
+import Avatar from "./Avatar"
+
+import styles from "./myPages.module.css"
+
+import { User } from "@/types/user"
+
+export default function MyPages({
+  myPagesNavigation,
+  user,
+}: {
+  myPagesNavigation: Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
+  user: Pick<User, "firstName" | "lastName"> | null
+}) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
+    useDropdownStore()
+
+  return user ? (
+    <>
+      <MenuButton 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"
+        />
+      </MenuButton>
+      <MyPagesMenu navigation={myPagesNavigation} />
+    </>
+  ) : (
+    <Link href={myPages[lang]} className={styles.link}>
+      <Avatar />
+      {intl.formatMessage({ id: "Log in/Join" })}
+    </Link>
+  )
+}

components/Header/MainMenu/MyPages/myPages.module.css

@@ -0,0 +1,11 @@
+.button {
+  font-weight: 600;
+}
+
+.chevron {
+  transition: transform 0.2s;
+}
+
+.chevron.isExpanded {
+  transform: rotate(180deg);
+}