feat(SW-184): my pages menu mobile/desktop functionality

components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import Link from "next/link"
+import { useIntl } from "react-intl"
+
+import { logout } from "@/constants/routes/handleAuth"
+
+import { ArrowRightIcon } from "@/components/Icons"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import useLang from "@/hooks/useLang"
+import { useTrapFocus } from "@/hooks/useTrapFocus"
+
+import styles from "./myPagesMenuContent.module.css"
+
+import { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"
+
+export default function MyPagesMenuContent({
+  navigation,
+  toggleOpenStateFn,
+  user,
+}: MyPagesMenuContentProps) {
+  const intl = useIntl()
+  const lang = useLang()
+  const myPagesMenuContentRef = useTrapFocus()
+
+  if (!navigation) {
+    return null
+  }
+
+  return (
+    <nav className={styles.myPagesMenuContent} ref={myPagesMenuContentRef}>
+      <div className={styles.intro}>
+        <Subtitle type="two" className={styles.userName}>
+          {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        </Subtitle>
+        <Caption className={styles.friendTypeWrapper}>
+          <span className={styles.friendType}>Loyal friend</span>
+          <span className={styles.friendPoints}>12 350 points</span>
+        </Caption>
+      </div>
+
+      <ul className={styles.groups}>
+        {navigation.menuItems.map((menuItem, idx) => (
+          <li
+            key={`${menuItem.display_sign_out_link}-${idx}`}
+            className={styles.group}
+          >
+            <Divider color="subtle" className={styles.divider} />
+            <ul className={styles.menuItems}>
+              {menuItem.links.map((link) => (
+                <li key={link.uid}>
+                  <Link
+                    href={link.originalUrl || link.url}
+                    onClick={toggleOpenStateFn}
+                    className={`${styles.link} ${menuItem.display_sign_out_link ? styles.smallLink : ""}`}
+                  >
+                    {link.linkText}
+                    <ArrowRightIcon className={styles.arrow} color="burgundy" />
+                  </Link>
+                </li>
+              ))}
+              {menuItem.display_sign_out_link && lang ? (
+                <li>
+                  <Link
+                    href={logout[lang]}
+                    prefetch={false}
+                    className={`${styles.link} ${styles.smallLink}`}
+                  >
+                    {intl.formatMessage({ id: "Log out" })}
+                  </Link>
+                </li>
+              ) : null}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}

components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css

@@ -0,0 +1,74 @@
+.myPagesMenuContent {
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.intro {
+  padding: 0 var(--Spacing-x1);
+}
+
+.myPagesMenuContent .friendTypeWrapper {
+  color: var(--UI-Text-Medium-contrast);
+}
+
+.divider {
+  margin: var(--Spacing-x2) 0;
+}
+
+.friendType {
+  font-family: var(--typography-Title-5-fontFamily);
+  letter-spacing: var(--typography-Title-5-letterSpacing);
+  font-size: var(--typography-Caption-Bold-fontSize);
+  text-transform: uppercase;
+}
+
+.friendType::after {
+  content: " · ";
+  display: inline;
+  padding: 0 var(--Spacing-x-half);
+}
+
+.groups,
+.menuItems {
+  list-style: none;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  padding: var(--Spacing-x1);
+  gap: var(--Spacing-x-one-and-half);
+  color: var(--Scandic-Brand-Burgundy);
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: 500;
+  line-height: var(--typography-Body-Bold-lineHeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.link:hover {
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}
+
+.link.smallLink {
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+}
+
+.link:not(:hover) .arrow {
+  opacity: 0;
+}
+
+@media screen and (min-width: 768px) {
+  .myPagesMenuContent {
+    padding: var(--Spacing-x2) var(--Spacing-x4);
+  }
+  .userName {
+    display: none;
+  }
+}