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

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

@@ -0,0 +1,10 @@
+import { logout } from "@/constants/routes/handleAuth"
+import { serverClient } from "@/lib/trpc/server"
+
+import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
+
+export default async function MyPagesMobileDropdownPage() {
+  // TODO: Figure out how to pass down props at the paralell route level.
+  // - POssibly by parsing [...paths]
+  return <MyPagesMobileDropdown lang={null} />
+}

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

@@ -5,8 +5,15 @@ import { LangParams, PageArgs } from "@/types/params"
 export default function HeaderLayout({
   params,
   languageSwitcher,
+  myPagesMobileDropdown,
 }: PageArgs<LangParams> & {
   languageSwitcher: React.ReactNode
-}) {
-  return <Header lang={params.lang} languageSwitcher={languageSwitcher} />
+} & { myPagesMobileDropdown: React.ReactNode }) {
+  return (
+    <Header
+      lang={params.lang}
+      myPagesMobileDropdown={myPagesMobileDropdown}
+      languageSwitcher={languageSwitcher}
+    />
+  )
 }

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

@@ -2,6 +2,7 @@ import { baseUrls } from "@/constants/routes/baseUrls"
 
 import Header from "@/components/Current/Header"
 import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
+import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
 
 import { LangParams, PageArgs } from "@/types/params"
 
@@ -9,6 +10,7 @@ export default async function HeaderPage({ params }: PageArgs<LangParams>) {
   return (
     <Header
       lang={params.lang}
+      myPagesMobileDropdown={<MyPagesMobileDropdown lang={params.lang} />}
       languageSwitcher={<LanguageSwitcher urls={baseUrls} lang={params.lang} />}
     />
   )

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

@@ -0,0 +1,12 @@
+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.
+  const data = await serverClient().contentstack.languageSwitcher.get()
+  if (!data) {
+    return null
+  }
+  return <MyPagesMobileDropdown lang={data.lang} />
+}

app/[lang]/(live-current)/layout.tsx

@@ -24,8 +24,11 @@ export default async function RootLayout({
   children,
   params,
   languageSwitcher,
+  myPagesMobileDropdown,
 }: React.PropsWithChildren<
-  LayoutArgs<LangParams> & { languageSwitcher: React.ReactNode }
+  LayoutArgs<LangParams> & { languageSwitcher: React.ReactNode } & {
+    myPagesMobileDropdown: React.ReactNode
+  }
 >) {
   const { defaultLocale, locale, messages } = await getIntl()
   return (
@@ -82,7 +85,11 @@ export default async function RootLayout({
         <LangPopup lang={params.lang} />
         <SkipToMainContent />
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
-          <Header lang={params.lang} languageSwitcher={languageSwitcher} />
+          <Header
+            lang={params.lang}
+            myPagesMobileDropdown={myPagesMobileDropdown}
+            languageSwitcher={languageSwitcher}
+          />
           {children}
           <Footer lang={params.lang} />
         </ServerIntlProvider>