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

components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css

@@ -0,0 +1,55 @@
+.navigationMenu {
+  background-color: #fff;
+  border-top: 1px solid #e3e0db;
+  display: none;
+  list-style: none;
+  overflow-y: visible;
+  margin: 0;
+  padding-inline-start: 0;
+}
+
+.navigationMenu.navigationMenuIsOpen {
+  display: block;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 100%;
+}
+
+.dropdownWrapper {
+  display: flex;
+  width: 100%;
+  padding: 20px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  background-color: var(--Main-Grey-White);
+  box-shadow:
+    0px 276px 77px 0px rgba(0, 0, 0, 0),
+    0px 177px 71px 0px rgba(0, 0, 0, 0.01),
+    0px 99px 60px 0px rgba(0, 0, 0, 0.05),
+    0px 44px 44px 0px rgba(0, 0, 0, 0.09),
+    0px 11px 24px 0px rgba(0, 0, 0, 0.1);
+}
+
+.heading {
+  padding: 20px;
+}
+
+.dropdownLinks {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+  width: 100%;
+  list-style: none;
+}
+
+@media screen and (min-width: 950px) {
+  .navigationMenu {
+    display: none;
+  }
+
+  .navigationMenu.navigationMenuIsOpen {
+    display: none;
+  }
+}