feat: add initial my pages navigation

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

@@ -6,16 +6,36 @@ import Sidebar from "@/components/MyPages/Sidebar"
 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 { GetNavigationMyPages } from "@/lib/graphql/Query/NavigationMyPages.graphql"
 
-export default function MyPagesLayout({
+export default async function MyPagesLayout({
   children,
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  const response = await request<GetNavigationMyPagesData>(
+    GetNavigationMyPages,
+    {
+      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,
+    }
+  })
+
   return (
     <div className={`${firaMono.variable} ${firaSans.variable} ${styles.page}`}>
       <Header lang={params.lang} />
       <div className={styles.content}>
-        <Sidebar />
+        <Sidebar menuItems={menuItems} />
         {children}
       </div>
     </div>

components/MyPages/Sidebar/index.tsx

@@ -2,29 +2,22 @@ import { LogOut } from "react-feather"
 import Link from "next/link"
 
 import styles from "./sidebar.module.css"
+import { SidebarProps } from "@/types/requests/myPages/navigation"
 
-export default function Sidebar() {
+export default function Sidebar({ menuItems }: SidebarProps) {
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
-        <Link className={`${styles.link} ${styles.active}`} href="#">
-          My Pages
-        </Link>
-        <Link className={styles.link} href="#">
-          My Stays
-        </Link>
-        <Link className={styles.link} href="#">
-          My Points
-        </Link>
-        <Link className={styles.link} href="#">
-          My Benefits
-        </Link>
-        <Link className={styles.link} href="#">
-          About Scandic Friends
-        </Link>
-        <Link className={styles.link} href="#">
-          My Profile
-        </Link>
+        {/* <Link className={`${styles.link} ${styles.active}`} href="#">
+          My Scandic
+        </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 className={styles.link} href="/api/auth/signout">
           Log out <LogOut height={16} width={16} />
         </Link>

lib/graphql/Query/NavigationMyPages.graphql

@@ -0,0 +1,29 @@
+query GetNavigationMyPages {
+  all_navigation_my_pages {
+    items {
+      items {
+        ... on NavigationMyPagesItemsItem {
+          __typename
+          item {
+            pageConnection {
+              edges {
+                node {
+                  ... on CodeDefinedPage {
+                    title
+                  }
+                  ... on ContentPage {
+                    title
+                  }
+                }
+              }
+            }
+            link_text
+          }
+        }
+      }
+      system {
+        uid
+      }
+    }
+  }
+}

types/requests/myPages/navigation.ts

@@ -0,0 +1,18 @@
+import type { AllRequestResponse } from "../utils/all"
+import { Edges } from "../utils/edges"
+
+export type MenuItem = { uid: string; title: string; linkText: string }
+
+export type SidebarProps = { menuItems: MenuItem[] }
+
+export type PageLink = { uid: string; title: string }
+
+export type NavigationItem = {
+  item: { pageConnection: Edges<PageLink>; link_text: string }
+}
+
+export type NavigationMyPages = { items: NavigationItem[] }
+
+export type GetNavigationMyPagesData = {
+  all_navigation_my_pages: AllRequestResponse<NavigationMyPages>
+}