<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const route = useRoute()
const items = ref<NavigationMenuItem[][]>([
  [
    {
      label: 'Guide',
      icon: 'lucide-book-open'
    },
    {
      label: 'Composables',
      icon: 'lucide-database',
      children: [
        {
          label: 'defineShortcuts',
          icon: 'lucide-file-text',
          description: 'Define shortcuts for your application.',
          to: '/'
        },
        {
          label: 'useOverlay',
          icon: 'lucide-file-text',
          description: 'Display a modal/slideover within your application.',
          to: '/'
        },
        {
          label: 'useToast',
          icon: 'lucide-file-text',
          description: 'Display a toast within your application.',
          to: '/'
        }
      ]
    },
    {
      label: 'Components',
      icon: 'lucide-box',
      to: '',
      children: [
        {
          label: 'Link',
          icon: 'lucide-file-text',
          description: 'Use NuxtLink with superpowers.',
          to: '/'
        },
        {
          label: 'Modal',
          icon: 'lucide-file-text',
          description: 'Display a modal within your application.',
          to: '/'
        },
        {
          label: 'NavigationMenu',
          icon: 'lucide-file-text',
          description: 'Display a list of links.',
          to: '/'
        },
        {
          label: 'Pagination',
          icon: 'lucide-file-text',
          description: 'Display a list of pages.',
          to: ''
        },
        {
          label: 'Popover',
          icon: 'lucide-file-text',
          description: 'Display a non-modal dialog that floats around a trigger element.',
          to: '/'
        },
        {
          label: 'Progress',
          icon: 'lucide-file-text',
          description: 'Show a horizontal bar to indicate task progression.',
          to: '/'
        }
      ]
    }
  ]
  // [
  //   {
  //     label: 'GitHub',
  //     icon: 'simple-icons-github',
  //     badge: '3.8k',
  //     to: 'https://github.com/nuxt/ui',
  //     target: '_blank',
  //   },
  //   {
  //     label: 'Help',
  //     icon: 'lucide-circle-help',
  //     badge: '3.8k',
  //     disabled: true
  //   }
  // ]
])
</script>

<template>
  <UNavigationMenu
    orientation="vertical"
    :items="items"
    class="w-full justify-center"
    color="primary"
  />
</template>
