fix: add navigation subitems

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -7,7 +7,11 @@ import styles from "./layout.module.css"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
 import { request } from "@/lib/graphql/request"
-import { GetNavigationMyPagesData } from "@/types/requests/myPages/navigation"
+import {
+  GetNavigationMyPagesData,
+  NavigationItem,
+  MenuItem,
+} from "@/types/requests/myPages/navigation"
 import { GetNavigationMyPages } from "@/lib/graphql/Query/NavigationMyPages.graphql"
 
 export default async function MyPagesLayout({
@@ -20,16 +24,21 @@ export default async function MyPagesLayout({
       locale: params.lang,
     }
   )
-  const navigation = response.data.all_navigation_my_pages.items[0]
 
-  const menuItems = navigation.items.map(({ item }) => {
-    const { title, uid } = item.pageConnection.edges[0].node
-    return {
-      title,
-      uid,
-      linkText: item.link_text,
-    }
-  })
+  function mapMenuItems(navigationItems: NavigationItem[]) {
+    return navigationItems.map(({ item }): MenuItem => {
+      const { title, uid } = item.pageConnection.edges[0].node
+      return {
+        title,
+        uid,
+        linkText: item.link_text,
+        subItems: item.sub_items ? mapMenuItems(item.sub_items) : null,
+      }
+    })
+  }
+
+  const navigation = response.data.all_navigation_my_pages.items[0]
+  const menuItems = mapMenuItems(navigation.items)
 
   return (
     <div className={`${firaMono.variable} ${firaSans.variable} ${styles.page}`}>

components/MyPages/Sidebar/index.tsx

@@ -13,9 +13,20 @@ export default function Sidebar({ menuItems }: SidebarProps) {
         </Link> */}
         {/* Base styles.active on menuItem href and current path */}
         {menuItems.map((item) => (
-          <Link key={item.uid} className={styles.link} href="#">
-            {item.linkText || item.title}
-          </Link>
+          <>
+            <Link key={item.uid} className={styles.link} href="#">
+              {item.linkText || item.title}
+            </Link>
+            {item.subItems
+              ? item.subItems.map((subItem) => {
+                  return (
+                    <Link key={subItem.uid} className={styles.link} href="#">
+                      {subItem.linkText || subItem.title}
+                    </Link>
+                  )
+                })
+              : null}
+          </>
         ))}
 
         <Link className={styles.link} href="/api/auth/signout">

lib/graphql/Query/NavigationMyPages.graphql

@@ -5,25 +5,45 @@ query GetNavigationMyPages {
         ... on NavigationMyPagesItemsItem {
           __typename
           item {
-            pageConnection {
-              edges {
-                node {
-                  ... on CodeDefinedPage {
-                    title
-                  }
-                  ... on ContentPage {
-                    title
+            link_text
+            sub_items {
+              ... on NavigationMyPagesItemsItemBlockSubItemsItem {
+                __typename
+                item {
+                  link_text
+                  pageConnection {
+                    edges {
+                      node {
+                        ... on CodeDefinedPage {
+                          title
+                          url
+                        }
+                        ... on ContentPage {
+                          title
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            pageConnection {
+              edges {
+                node {
+                  ... on ContentPage {
+                    title
+                  }
+                  ... on CodeDefinedPage {
+                    title
+                    url
                   }
                 }
               }
             }
-            link_text
           }
         }
       }
-      system {
-        uid
-      }
+      title
     }
   }
 }

types/requests/myPages/navigation.ts

@@ -1,14 +1,24 @@
 import type { AllRequestResponse } from "../utils/all"
 import { Edges } from "../utils/edges"
 
-export type MenuItem = { uid: string; title: string; linkText: string }
+export type MenuItem = {
+  uid: string
+  title: string
+  linkText: string
+  subItems: MenuItem[] | null
+  url?: string
+}
 
 export type SidebarProps = { menuItems: MenuItem[] }
 
-export type PageLink = { uid: string; title: string }
+export type PageLink = { uid: string; title: string; url?: string }
 
 export type NavigationItem = {
-  item: { pageConnection: Edges<PageLink>; link_text: string }
+  item: {
+    pageConnection: Edges<PageLink>
+    link_text: string
+    sub_items: NavigationItem[] | null
+  }
 }
 
 export type NavigationMyPages = { items: NavigationItem[] }