feat(NavigationMenu): control items open & defaultOpen on vertical

Resolves #2608

docs/content/3.components/navigation-menu.md

@@ -137,7 +137,7 @@ Each item can take a `children` array of objects with the following properties t
 
 Use the `orientation` prop to change the orientation of the NavigationMenu.
 
-When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children.
+When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties.
 
 ::component-code
 ---
@@ -152,6 +152,7 @@ props:
   items:
     - - label: Guide
         icon: i-lucide-book-open
+        defaultOpen: true
         children:
           - label: Introduction
             description: Fully styled and customizable components for Nuxt.

playground/app/pages/components/navigation-menu.vue

@@ -8,14 +8,15 @@ const orientations = Object.keys(theme.variants.orientation)
 const color = ref(theme.defaultVariants.color)
 const highlightColor = ref()
 const variant = ref(theme.defaultVariants.variant)
-const orientation = ref('horizontal' as const)
+const orientation = ref('vertical' as const)
 const highlight = ref(true)
 
 const items = [
   [{
     label: 'Documentation',
     icon: 'i-lucide-book-open',
     badge: 10,
+    defaultOpen: true,
     children: [{
       label: 'Introduction',
       description: 'Fully styled and customizable components for Nuxt.',

src/runtime/components/NavigationMenu.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps } from 'radix-vue'
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, CollapsibleRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/navigation-menu'
@@ -17,7 +17,7 @@ export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'child
   description?: string
 }
 
-export interface NavigationMenuItem extends Omit<LinkProps, 'raw' | 'custom'> {
+export interface NavigationMenuItem extends Omit<LinkProps, 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
   label?: string
   icon?: string
   avatar?: AvatarProps
@@ -208,6 +208,8 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
           :key="`list-${listIndex}-${index}`"
           as="li"
           :value="item.value || String(index)"
+          :default-open="item.defaultOpen"
+          :open="item.open"
           :class="ui.item({ class: props.ui?.item })"
         >
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>