feat: pass in navigation from server components

app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx

@@ -5,6 +5,9 @@ import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDrop
 
 export default async function MyPagesMobileDropdownPage() {
   // TODO: Figure out how to pass down props at the paralell route level.
-  // - POssibly by parsing [...paths]
+  // - Possibly by parsing [...paths]
-  return <MyPagesMobileDropdown lang={null} />
+
+  const navigation = await serverClient().contentstack.myPages.navigation.get()
+  if (!navigation) return null
+  return <MyPagesMobileDropdown navigation={navigation} lang={null} />
 }

app/[lang]/(live)/@header/page.tsx

@@ -1,4 +1,5 @@
 import { baseUrls } from "@/constants/routes/baseUrls"
+import { serverClient } from "@/lib/trpc/server"
 
 import Header from "@/components/Current/Header"
 import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
@@ -7,10 +8,13 @@ import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDrop
 import { LangParams, PageArgs } from "@/types/params"
 
 export default async function HeaderPage({ params }: PageArgs<LangParams>) {
+  const navigation = await serverClient().contentstack.myPages.navigation.get()
   return (
     <Header
       lang={params.lang}
-      myPagesMobileDropdown={<MyPagesMobileDropdown lang={params.lang} />}
+      myPagesMobileDropdown={
+        <MyPagesMobileDropdown navigation={navigation} lang={params.lang} />
+      }
       languageSwitcher={<LanguageSwitcher urls={baseUrls} lang={params.lang} />}
     />
   )

app/[lang]/(live-current)/@myPagesMobileDropdown/page.tsx

@@ -3,10 +3,13 @@ import { serverClient } from "@/lib/trpc/server"
 import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
 
 export default async function MyPagesMobileDropdownPage() {
-  // TODO: Dirty way to get lang value. Figure out a proper way.
+  // TODO: Remove data call and pass down props at the paralell route level.
-  const data = await serverClient().contentstack.languageSwitcher.get()
+  const [data, navigation] = await Promise.all([
-  if (!data) {
+    serverClient().contentstack.languageSwitcher.get(),
+    serverClient().contentstack.myPages.navigation.get(),
+  ])
+  if (!data || !navigation) {
     return null
   }
-  return <MyPagesMobileDropdown lang={data.lang} />
+  return <MyPagesMobileDropdown navigation={navigation} lang={null} />
 }

components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -1,8 +1,10 @@
+"use client"
 import { Fragment } from "react"
 
 import { Lang } from "@/constants/languages"
 import { logout } from "@/constants/routes/handleAuth"
-import { serverClient } from "@/lib/trpc/server"
+import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
+import useDropdownStore from "@/stores/main-menu"
 
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
@@ -10,26 +12,30 @@ import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./my-pages-mobile-dropdown.module.css"
 
-export default async function MyPagesMobileDropdown({
+type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
+
+export default function MyPagesMobileDropdown({
+  navigation,
   lang,
 }: {
+  navigation: Navigation
   lang: Lang | null
 }) {
-  const navigation = await serverClient().contentstack.myPages.navigation.get()
+  const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
+    useDropdownStore()
   if (!navigation) {
     return null
   }
 
   return (
     <nav
-      className={`${styles.navigationMenu} ${/*isMyPagesMenuOpen*/ true ? styles.navigationMenuIsOpen : ""}`}
+      className={`${styles.navigationMenu} ${isMyPagesMobileMenuOpen ? 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}>
@@ -39,14 +45,15 @@ export default async function MyPagesMobileDropdown({
                     href={link.originalUrl || link.url}
                     partialMatch
                     size={menuItem.display_sign_out_link ? "small" : "regular"}
-                    variant="myPage"
+                    variant="myPageMobileDropdown"
                     color="burgundy"
+                    onClick={toggleMyPagesMobileMenu}
                   >
-                    {/*TODO: add myPageMobileMenu variant */}
                     {link.linkText}
                   </Link>
                 </li>
               ))}
+              {/*TODO: Reintroduce once we figure out how to pass lang param. */}
               {/* {menuItem.display_sign_out_link ? ( */}
               {/*   <li> */}
               {/*     <Link */}