feat(poc): improve footer to have two levels

components/layout/footer.tsx

@@ -10,24 +10,30 @@ const { SITE_NAME } = process.env;
 export default async function Footer() {
   const currentYear = new Date().getFullYear();
   const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
-  const menu = await getMenu({ type: 'footer-navigation' });
+  const menu = await getMenu({ type: 'footer-navigation', depth: 2 });
 
   return (
     <footer className="border-t border-gray-700 bg-white text-black dark:bg-black dark:text-white">
       <div className="mx-auto w-full max-w-7xl px-6">
         <div className="grid grid-cols-1 gap-8 border-b border-gray-700 py-12 transition-colors duration-150 lg:grid-cols-12">
-          <div className="col-span-1 lg:col-span-3">
-            <a className="flex flex-initial items-center font-bold md:mr-24" href="/">
-              <span className="mr-2">
+          <div className="col-span-1 lg:col-span-4">
+            <a className="flex flex-initial items-center font-bold" href="/">
+              <span className="mr-4">
                 <LogoIcon className="h-8" />
               </span>
               <span>{SITE_NAME}</span>
             </a>
           </div>
-          {menu.length ? (
-            <nav className="col-span-1 lg:col-span-7">
-              <ul className="grid md:grid-flow-col md:grid-cols-3 md:grid-rows-4">
           {menu.map((item: Menu) => (
+            < nav className="col-span-1 lg:col-span-3" key={item.title + item.type} >
+              {
+                item.type === "headline" ? (
+                  <span className='font-bold'>{item.title}</span>
+                ) : null
+              }
+              {item.children.length > 0 ? (
+                <ul className="py-3 md:py-0 md:pt-4" key={item.title}>
+                  {item.children.map((item: Menu) => (
                     <li key={item.title} className="py-3 md:py-0 md:pb-4">
                       <Link
                         href={item.path}
@@ -38,9 +44,18 @@ export default async function Footer() {
                     </li>
                   ))}
                 </ul>
+              ) :
+                // if there are no children, at least display a link
+                <Link
+                  key={item.title}
+                  href={item.path}
+                  className="text-gray-800 transition duration-150 ease-in-out hover:text-gray-300 dark:text-gray-100"
+                >
+                  {item.title}
+                </Link>}
             </nav>
-          ) : null}
-          <div className="col-span-1 text-black dark:text-white lg:col-span-2">
+          ))}
+          <div className="col-span-1 text-black dark:text-white lg:col-span-2 inline-grid justify-items-end">
             <a aria-label="Github Repository" href="https://github.com/vercel/commerce">
               <GitHubIcon className="h-6" />
             </a>
@@ -71,6 +86,6 @@ export default async function Footer() {
           </div>
         </div>
       </div>
-    </footer>
+    </footer >
   );
 }

lib/shopware/api-types/apiTypes-6.5.2.0.d.ts

@@ -689,7 +689,7 @@ export type components = {
       breadcrumb?: readonly unknown[];
       /** Format: int64 */
       childCount?: number;
-      children?: components['schemas']['Category'];
+      children?: components['schemas']['Category'][];
       cmsPage?: components['schemas']['CmsPage'];
       cmsPageId?: string;
       /** Runtime field, cannot be used as part of the criteria. */

lib/shopware/api.ts

@@ -18,14 +18,15 @@ const apiInstance = createAPIClient<operations, operationPaths>({
 });
 
 export async function requestNavigation(
-  type: StoreNavigationTypeSW
+  type: StoreNavigationTypeSW,
+  depth: number
 ): Promise<ApiSchemas['NavigationRouteResponse']> {
   return await apiInstance.invoke(
     'readNavigation post /navigation/{activeId}/{rootId} sw-include-seo-urls',
     {
       activeId: type,
       rootId: type,
-      depth: 1
+      depth: depth
     }
   );
 }

lib/shopware/index.ts

@@ -34,9 +34,10 @@ import {
   transformStaticCollection
 } from './transform';
 
-export async function getMenu(params?: { type?: StoreNavigationTypeSW }): Promise<Menu[]> {
+export async function getMenu(params?: { type?: StoreNavigationTypeSW, depth?: number }): Promise<Menu[]> {
   const type = params?.type || 'main-navigation';
-  const res = await requestNavigation(type);
+  const depth = params?.depth || 1;
+  const res = await requestNavigation(type, depth);
 
   return res ? transformMenu(res) : [];
 }

lib/shopware/transform.ts

@@ -12,18 +12,22 @@ import { ListItem } from 'components/layout/search/filter';
 export function transformMenu(res: ApiSchemas['NavigationRouteResponse']) {
   let menu: Menu[] = [];
 
-  res.map((item) =>
-    menu.push({
+  res.map((item) => menu.push(transformMenuItem(item)));
+
+  return menu;
+}
+
+function transformMenuItem(item: ApiSchemas['Category']): Menu {
+  return {
     id: item.id ?? '',
     title: item.name,
+    children: item.children?.map((item) => transformMenuItem(item)) ?? [],
     path:
       item.seoUrls && item.seoUrls.length > 0 && item.seoUrls[0] && item.seoUrls[0].seoPathInfo
         ? '/search/' + item.seoUrls[0].seoPathInfo
-          : ''
-    })
-  );
-
-  return menu;
+        : '',
+    type: item.children && item.children.length > 0 ? 'headline' : 'link'
+  };
 }
 
 export function transformPage(
@@ -223,7 +227,7 @@ function transformVariants(parent: ApiSchemas['Product']): ProductVariant[] {
           }
         };
 
-        productVariants.push(currentVariant)
+        productVariants.push(currentVariant);
       }
     });
   }

lib/shopware/types.ts

@@ -18,7 +18,7 @@ export type SeoURLResultSW = {
 } & ApiSchemas['EntitySearchResult'];
 
 /** Vercel Commerce Types */
-export type Menu = { id: string; title: string; path: string };
+export type Menu = { id: string; title: string; path: string, type: string, children: Menu[] };
 
 export type Page = {
   id: string;