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

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -0,0 +1,83 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { logout } from "@/constants/routes/handleAuth"
+import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
+import useDropdownStore from "@/stores/main-menu"
+
+import { ArrowRightIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
+
+import styles from "./myPagesMenu.module.css"
+
+type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
+
+export default function MyPagesMenu({
+  navigation,
+}: {
+  navigation: Navigation
+}) {
+  const { formatMessage } = useIntl()
+  const lang = useLang()
+  const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
+    useDropdownStore()
+
+  if (!navigation) {
+    return null
+  }
+
+  console.log(navigation)
+
+  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>
+  )
+}

components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css

@@ -0,0 +1,58 @@
+.myPagesMenu {
+  position: absolute;
+  top: 46px;
+  right: 0;
+  background-color: #fff;
+  border-top: 1px solid #e3e0db;
+  display: none;
+  list-style: none;
+  overflow-y: visible;
+  margin: 0;
+  padding: var(--Spacing-x2) var(--Spacing-x4);
+  border-radius: var(--Corner-radius-Large);
+  box-shadow: 0px 0px 14px 6px #0000001a;
+}
+
+.myPagesMenu.isExpanded {
+  display: block;
+}
+
+.friendTypeWrapper {
+  padding: 0 var(--Spacing-x1) var(--Spacing-x2);
+  font-weight: 400;
+  color: var(--UI-Text-Medium-contrast);
+}
+.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;
+}
+
+.group {
+  padding: var(--Spacing-x2) 0;
+  border-top: 1px solid var(--Base-Border-Subtle);
+}
+
+.group:last-child {
+  padding-bottom: 0;
+}
+
+.arrow {
+  opacity: 0;
+}
+
+.link:hover .arrow {
+  opacity: 1;
+}