feat: add my pages mobile dropdown cmoponent, parallel route, and consume + zustand store

components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -0,0 +1,69 @@
+import { Fragment } from "react"
+
+import { Lang } from "@/constants/languages"
+import { logout } from "@/constants/routes/handleAuth"
+import { serverClient } from "@/lib/trpc/server"
+
+import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./my-pages-mobile-dropdown.module.css"
+
+export default async function MyPagesMobileDropdown({
+  lang,
+}: {
+  lang: Lang | null
+}) {
+  const navigation = await serverClient().contentstack.myPages.navigation.get()
+  if (!navigation) {
+    return null
+  }
+
+  return (
+    <nav
+      className={`${styles.navigationMenu} ${/*isMyPagesMenuOpen*/ true ? styles.navigationMenuIsOpen : ""}`}
+    >
+      <Title className={styles.heading} textTransform="capitalize" level="h5">
+        {navigation.title}
+      </Title>
+      {navigation.menuItems.map((menuItem, idx) => (
+        <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
+          {/*TODO: add pale color? */}
+          <Divider color="peach" />
+          <ul className={styles.dropdownWrapper}>
+            <ul className={styles.dropdownLinks}>
+              {menuItem.links.map((link) => (
+                <li key={link.uid}>
+                  <Link
+                    href={link.originalUrl || link.url}
+                    partialMatch
+                    size={menuItem.display_sign_out_link ? "small" : "regular"}
+                    variant="myPage"
+                    color="burgundy"
+                  >
+                    {/*TODO: add myPageMobileMenu variant */}
+                    {link.linkText}
+                  </Link>
+                </li>
+              ))}
+              {/* {menuItem.display_sign_out_link ? ( */}
+              {/*   <li> */}
+              {/*     <Link */}
+              {/*       color="burgundy" */}
+              {/*       href={logout[lang]} */}
+              {/*       prefetch={false} */}
+              {/*       size="small" */}
+              {/*       variant="sidebar" */}
+              {/*     > */}
+              {/*       {formatMessage({ id: "Log out" })} */}
+              {/*     </Link> */}
+              {/*   </li> */}
+              {/* ) : null} */}
+            </ul>
+          </ul>
+        </Fragment>
+      ))}
+    </nav>
+  )
+}