feat: pass in navigation from server components

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 */}