fix(NavigationMenu): nested accordion context at every level (#4363)

Co-authored-by: Benjamin Canac <[email protected]>

Author: vachmara

src/runtime/components/NavigationMenu.vue

@@ -236,20 +236,13 @@ const lists = computed<NavigationMenuItem[][]>(() =>
     : []
 )
 
-function getAccordionDefaultValue(list: NavigationMenuItem[]) {
-  function findItemsWithDefaultOpen(items: NavigationMenuItem[], level = 0): string[] {
-    return items.reduce((acc: string[], item, index) => {
-      if (item.defaultOpen || item.open) {
-        acc.push(item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`))
-      }
-      if (item.children?.length) {
-        acc.push(...findItemsWithDefaultOpen(item.children, level + 1))
-      }
-      return acc
-    }, [])
-  }
-
-  const indexes = findItemsWithDefaultOpen(list)
+function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
+  const indexes = list.reduce((acc: string[], item, index) => {
+    if (item.defaultOpen || item.open) {
+      acc.push(item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`))
+    }
+    return acc
+  }, [])
 
   return props.type === 'single' ? indexes[0] : indexes
 }
@@ -378,7 +371,14 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
       </ULink>
 
       <AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
-        <ul :class="ui.childList({ class: props.ui?.childList })">
+        <AccordionRoot
+          v-bind="({
+            ...accordionProps,
+            defaultValue: getAccordionDefaultValue(item.children, level + 1)
+          } as AccordionRootProps)"
+          as="ul"
+          :class="ui.childList({ class: props.ui?.childList })"
+        >
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
             :key="childIndex"
@@ -387,7 +387,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
             :level="level + 1"
             :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
           />
-        </ul>
+        </AccordionRoot>
       </AccordionContent>
     </component>
   </DefineItemTemplate>