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 }) => {
+  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>
+            {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,11 +5,18 @@ query GetNavigationMyPages {
         ... on NavigationMyPagesItemsItem {
           __typename
           item {
+            link_text
+            sub_items {
+              ... on NavigationMyPagesItemsItemBlockSubItemsItem {
+                __typename
+                item {
+                  link_text
                   pageConnection {
                     edges {
                       node {
                         ... on CodeDefinedPage {
                           title
+                          url
                         }
                         ... on ContentPage {
                           title
@@ -17,13 +24,26 @@ query GetNavigationMyPages {
                       }
                     }
                   }
-            link_text
                 }
               }
             }
-      system {
+            pageConnection {
-        uid
+              edges {
+                node {
+                  ... on ContentPage {
+                    title
+                  }
+                  ... on CodeDefinedPage {
+                    title
+                    url
                   }
                 }
               }
             }
+          }
+        }
+      }
+      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[] }