105 lines
2.4 KiB
Vue
105 lines
2.4 KiB
Vue
<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>
|