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