Fix(Navigation): Convert nav data from object to array of objects

src/components/Navigation.astro

@@ -15,8 +15,7 @@ const collections = await Promise.all(
 )
 
 const navDataRaw = collections.flat();
-const uniqueSections = new Set(navDataRaw.map((entry) => entry.data.section));
-const navData: Record<string, TextContentEntry[]> = {};
+const uniqueSections = new Set(navDataRaw.map((entry) => entry.data.section as string));
 
 const [orderedSections, unorderedSections] = Array.from(uniqueSections).reduce(
     (acc, section) => {
@@ -37,7 +36,7 @@ const [orderedSections, unorderedSections] = Array.from(uniqueSections).reduce(
   )
 
 const sortedSections = [...orderedSections, ...unorderedSections.sort()]
-sortedSections.map((section) => {
+const navData = sortedSections.map((section) => {
   const entries = navDataRaw
     .filter((entry) => entry.data.section === section)
     .map(entry => ({ id: entry.id, data: { id: entry.data.id, section, sortValue: entry.data.sortValue }} as TextContentEntry))
@@ -68,7 +67,7 @@ sortedSections.map((section) => {
     return a.data.id.localeCompare(b.data.id)
   })
 
-  navData[section] = sortedUniqueEntries;
+  return sortedUniqueEntries
 })
 
 ---

src/components/Navigation.tsx

@@ -2,9 +2,8 @@ import { useEffect, useState } from 'react'
 import { Nav, NavList, PageSidebarBody } from '@patternfly/react-core'
 import { NavSection } from './NavSection'
 import { type TextContentEntry } from './NavEntry'
-
 interface NavigationProps {
-  navData: Record<string, TextContentEntry[]>
+  navData: TextContentEntry[][]
 }
 
 export const Navigation: React.FunctionComponent<NavigationProps> = ({
@@ -29,14 +28,17 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
     <PageSidebarBody id="page-sidebar-body">
       <Nav onSelect={onNavSelect}>
         <NavList>
-          {Object.entries(navData).map(([key, value], index) => (
-            <NavSection
-              key={index}
-              entries={value}
-              sectionId={key}
-              activeItem={activeItem}
-            />
-          ))}
+          {navData.map((navEntries) => {
+            const { section } = navEntries[0].data
+            return (
+              <NavSection
+                key={section}
+                entries={navEntries}
+                sectionId={section}
+                activeItem={activeItem}
+              />
+            )
+          })}
         </NavList>
       </Nav>
     </PageSidebarBody>

src/components/__tests__/Navigation.test.tsx

@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Navigation } from '../Navigation'
-import { TextContentEntry } from '../NavEntry'
+import { type TextContentEntry } from '../NavEntry'
 
-const mockEntries: Record<string, TextContentEntry[]> = {
-  'section one': [
+const mockEntries: TextContentEntry[][] = [
+  [
     {
       id: 'entry1',
       data: { id: 'Entry1', section: 'section-one' },
@@ -26,7 +26,7 @@ const mockEntries: Record<string, TextContentEntry[]> = {
       data: { id: 'Entry5', section: 'section-one' },
     },
   ],
-  'section two': [
+  [
     {
       id: 'entry6',
       data: { id: 'Entry6', section: 'section-two' },
@@ -40,7 +40,7 @@ const mockEntries: Record<string, TextContentEntry[]> = {
       data: { id: 'Entry8', section: 'section-two' },
     },
   ],
-}
+]
 
 it('renders without crashing', () => {
   render(<Navigation navData={mockEntries} />)

src/components/__tests__/__snapshots__/Navigation.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`matches snapshot 1`] = `
           <button
             aria-expanded="true"
             class="pf-v6-c-nav__link"
-            id="nav-section-section one"
+            id="nav-section-section-one"
           >
             Section one
             <span
@@ -52,7 +52,7 @@ exports[`matches snapshot 1`] = `
             </span>
           </button>
           <section
-            aria-labelledby="nav-section-section one"
+            aria-labelledby="nav-section-section-one"
             class="pf-v6-c-nav__subnav"
           >
             <ul
@@ -162,7 +162,7 @@ exports[`matches snapshot 1`] = `
           <button
             aria-expanded="false"
             class="pf-v6-c-nav__link"
-            id="nav-section-section two"
+            id="nav-section-section-two"
           >
             Section two
             <span
@@ -188,7 +188,7 @@ exports[`matches snapshot 1`] = `
             </span>
           </button>
           <section
-            aria-labelledby="nav-section-section two"
+            aria-labelledby="nav-section-section-two"
             class="pf-v6-c-nav__subnav"
             hidden=""
           >