Add children to VerticalNavigation

[jeydi243]

Description

Hi, I really like the way VerticalNavigation is. If it could be possible to have a children component for every link in case of a link have children route. this dribbble explain it well shot So to add the possibility to have a children key that will also have VerticalNavigation for nested routes. I didn't see like issue. Thank you.

Additional context

Will be also better to have the possibility to set the icon indicator either left or right. The link with children could be rendered as an accordion but with content as a VerticalNavigation component.

[benjamincanac]

We have the DashboardSidebarLinks component that does exactly that: https://ui.nuxt.com/pro/components/dashboard-sidebar-links but it's part of @nuxt/ui-pro.

[Lionad-Morotar]

a very simple menu-component supports nested menu based on nuxt-ui vertical-navigation for those waiting for v3...

<!-- p-menu.vue -->
<template>
  <UVerticalNavigation
    :class="[ns.b(), ns.is(String(props.indent))]"
    :links="props.menus"
    v-bind="$attrs"
  >
    <template #default="{ link }">
      <span class="relative" :class="ns.e('label')">{{ link.name }}</span>
      <p-menu
        v-if="getSubMenus(link).length"
        :menus="getSubMenus(link)"
        :indent="props.indent + 1"
      />
    </template>
  </UVerticalNavigation>
</template>

<script setup lang="ts">
const ns = useBEM("menu");
const props = withDefaults(
  defineProps<{
    indent: number
    menus: any[]
  }>(),
  {
    indent: 0,
    menus: () => []
  }
);

const getSubMenus = (link: any) => {
  return link.childs || []
}
</script>

<style lang="scss">
@import 'assets/styles/index.scss';

@include b("menu") {
  @include e("label") {
    @apply text-base;
  }

  button:has(> .p-menu) {
    flex-wrap: wrap;
    row-gap: 0;

    > .p-menu {
      @apply mt-[0.7rem] -ml-[0.2rem] pl-5;

      @include e("label") {
        @apply font-normal text-sm;
      }
    }
  }
}
</style>

[benjamincanac]

Closing in favor of #2136.