CMS-45730 Use getPath, getItems to get links for navigation

Author: TRomesh

templates/alloy-template/src/app/[...slug]/page.tsx

@@ -20,20 +20,18 @@ export default async function Page({ params }: Props) {
   const path = `/${slug.join('/')}/`;
   const c = await client.getContentByPath(path);
 
-  const children = (await client.getItems(path)) ?? [];
-  const ancestors = (await client.getPath(path)) ?? [];
-
   if (c.length === 0) {
     notFound();
   }
 
   return (
     <>
-      <Header currentPath={{ children, ancestors }} />
+      {/** Passing down client and currentPath to Footer to fetch dynamic links */}
+      <Header client={client} currentPath={path} />
       <div className="container mx-auto p-10">
         <OptimizelyComponent opti={c[0]} />
       </div>
-      <Footer />
+      <Footer client={client} currentPath={path} />
     </>
   );
 }

templates/alloy-template/src/components/base/Footer.tsx

@@ -1,3 +1,5 @@
+import { GraphClient } from '@optimizely/cms-sdk';
+
 interface FooterLink {
   label: string;
   href: string;
@@ -9,8 +11,9 @@ interface FooterSection {
 }
 
 interface FooterProps {
+  client: GraphClient;
+  currentPath: string;
   sections?: FooterSection[];
-  currentPath?: string;
 }
 
 const defaultSections: FooterSection[] = [
@@ -48,7 +51,29 @@ const defaultSections: FooterSection[] = [
   },
 ];
 
-function Footer({ sections = defaultSections, currentPath }: FooterProps) {
+async function Footer({
+  client,
+  currentPath,
+  sections = defaultSections,
+}: FooterProps) {
+  const allLinks = await Promise.all([
+    client.getItems('/en/'),
+    client.getItems('/en/about-us'),
+  ]);
+
+  // Flatten the array of arrays and map to FooterLink format
+  const footerLinks = allLinks.flat().map((ancestor: any) => ({
+    key: ancestor._metadata?.key,
+    label: ancestor._metadata?.displayName,
+    href: ancestor._metadata?.url?.hierarchical,
+  }));
+
+  console.info(
+    'Footer footerLinks:',
+    currentPath,
+    JSON.stringify(footerLinks, null, 2)
+  );
+
   return (
     <footer className="bg-gray-800 text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

templates/alloy-template/src/components/base/Header.tsx

@@ -1,31 +1,26 @@
 import Link from 'next/link';
-
-interface NavigationItem {
-  label: string;
-  href: string;
-}
+import { GraphClient } from '@optimizely/cms-sdk';
 
 interface HeaderProps {
-  currentPath: any;
-  navigationItems?: NavigationItem[];
+  client: GraphClient;
+  currentPath: string;
   logoText?: string;
 }
 
-const defaultNavigationItems: NavigationItem[] = [
-  { label: 'ALLOY PLAN', href: '/en/alloy-plan' },
-  { label: 'ALLOY TRACK', href: '/en/alloy-track' },
-  { label: 'ALLOY MEET', href: '/en/alloy-meet' },
-  { label: 'ABOUT US', href: '/en/about-us' },
-];
-
-async function Header({
-  currentPath,
-  navigationItems = defaultNavigationItems,
-}: HeaderProps) {
-  const ancestors = currentPath?.ancestors || [];
+async function Header({ client, currentPath }: HeaderProps) {
+  const ancestors = (await client.getPath(currentPath)) || [];
+  const navLinks = (await client.getItems('/en/')) ?? [];
 
   // Filter out the start page (first item) and create breadcrumbs
   const breadcrumbs = ancestors.slice(1).map((ancestor: any) => ({
+    key: ancestor._metadata.key,
+    label: ancestor._metadata.displayName,
+    href: ancestor._metadata.url.hierarchical,
+  }));
+
+  // Create navigation from navLinks of the /en/ page
+  const navigations = navLinks.map((ancestor: any) => ({
+    key: ancestor._metadata.key,
     label: ancestor._metadata.displayName,
     href: ancestor._metadata.url.hierarchical,
   }));
@@ -39,12 +34,12 @@ async function Header({
             <nav className="hidden md:flex md:items-center md:space-x-8">
               <div className="flex-shrink-0">
                 {/* Logo */}
-                <img src="/logo.png" alt="Logo" className="h-14 w-14" />
+                {/* <img src="/logo.png" alt="Logo" className="h-14 w-14" /> */}
               </div>
               <div className="flex items-center space-x-8">
-                {navigationItems.map((item, index) => (
+                {navigations.map((item) => (
                   <a
-                    key={index}
+                    key={item.key}
                     href={item.href}
                     className="text-gray-700 hover:text-teal-600 transition-colors duration-200 text-lg font-extrabold uppercase tracking-wide"
                   >