feat(VerticalNavigation): ability to add dividers (#963)

* feat(VerticalNavigation): ability to add sections with divider

* lint fix

* updating branch. resolving conflicts

* reverting app.vue

* removing unnecessary style

---------

Co-authored-by: Inesh Bose <dev@inesh.xyz>

docs/components/content/examples/VerticalNavigationExampleSections.vue

@@ -0,0 +1,41 @@
+<script setup>
+const links = [
+  [
+    {
+      label: 'Profile',
+      avatar: {
+        src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+      },
+      badge: 100
+    }, {
+      label: 'Installation',
+      icon: 'i-heroicons-home',
+      to: '/getting-started/installation'
+    }, {
+      label: 'Vertical Navigation',
+      icon: 'i-heroicons-chart-bar',
+      to: '/navigation/vertical-navigation'
+    }, {
+      label: 'Command Palette',
+      icon: 'i-heroicons-command-line',
+      to: '/navigation/command-palette'
+    }
+  ],
+  [
+    {
+      label: 'Examples',
+      icon: 'i-heroicons-light-bulb',
+      to: '/getting-started/examples#verticalnavigation'
+    },
+    {
+      label: 'Help',
+      icon: 'i-heroicons-question-mark-circle',
+      to: '/getting-started/examples'
+    }
+  ]
+]
+</script>
+
+<template>
+  <UVerticalNavigation :links="links" />
+</template>

docs/content/5.navigation/1.vertical-navigation.md

@@ -27,6 +27,12 @@ You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/com
 Learn how to build a Tailwind like vertical navigation in the [Examples](/getting-started/examples#verticalnavigation) page.
 ::
 
+## Sections
+
+Group your navigation links into distinct sections, separated by a divider. You can do this by passing an array of arrays to the `links` prop of the VerticalNavigation component.
+
+:component-example{component="vertical-navigation-example-sections"}
+
 ## Slots
 
 You can use slots to customize links display.

src/runtime/components/navigation/VerticalNavigation.vue

@@ -1,7 +1,7 @@
 <template>
   <nav :class="ui.wrapper" v-bind="attrs">
-    <ul>
+    <ul v-for="(section, sectionIndex) of linkSections" :key="`linkSection${sectionIndex}`">
-      <li v-for="(link, index) of links" :key="index">
+      <li v-for="(link, index) of section" :key="`linkSection${sectionIndex}-${index}`">
         <ULink
           v-slot="{ isActive }"
           v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
@@ -40,17 +40,19 @@
           </slot>
         </ULink>
       </li>
+      <UDivider v-if="sectionIndex < linkSections.length - 1" :ui="ui.divider" />
     </ul>
   </nav>
 </template>
 
 <script lang="ts">
-import { toRef, defineComponent } from 'vue'
+import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import ULink from '../elements/Link.vue'
+import UDivider from '../layout/Divider.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, omit } from '../../utils'
 import type { VerticalNavigationLink, Strategy } from '../../types'
@@ -64,12 +66,13 @@ export default defineComponent({
   components: {
     UIcon,
     UAvatar,
-    ULink
+    ULink,
+    UDivider
   },
   inheritAttrs: false,
   props: {
     links: {
-      type: Array as PropType<VerticalNavigationLink[]>,
+      type: Array as PropType<VerticalNavigationLink[][] | VerticalNavigationLink[]>,
       default: () => []
     },
     class: {
@@ -84,11 +87,16 @@ export default defineComponent({
   setup (props) {
     const { ui, attrs } = useUI('verticalNavigation', toRef(props, 'ui'), config, toRef(props, 'class'))
 
+    const linkSections = computed(() => {
+      return (Array.isArray(props.links[0]) ? props.links : [props.links]) as VerticalNavigationLink[][]
+    })
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
       omit,
+      linkSections,
       twMerge,
       twJoin
     }

src/runtime/ui.config/navigation/verticalNavigation.ts

@@ -23,5 +23,10 @@ export default {
     base: 'relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5',
     active: 'bg-white dark:bg-gray-900',
     inactive: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900'
+  },
+  divider: {
+    wrapper: {
+      base: 'p-2'
+    }
   }
 }