mirror of
https://github.com/nuxt/ui.git
synced 2026-09-14 19:51:10 +08:00
Benjamin Canac
57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { NavigationMenuItem } from '@nuxt/ui'
|
|
|
|
const route = useRoute()
|
|
|
|
const items = computed<NavigationMenuItem[]>(() => [{
|
|
label: 'Docs',
|
|
to: '/docs/getting-started',
|
|
icon: 'i-lucide-book-open',
|
|
active: route.path.startsWith('/docs/getting-started')
|
|
}, {
|
|
label: 'Components',
|
|
to: '/docs/components',
|
|
icon: 'i-lucide-box',
|
|
active: route.path.startsWith('/docs/components')
|
|
}, {
|
|
label: 'Figma',
|
|
icon: 'i-simple-icons-figma',
|
|
to: 'https://www.figma.com/community/file/1288455405058138934',
|
|
target: '_blank'
|
|
}, {
|
|
label: 'Releases',
|
|
icon: 'i-lucide-rocket',
|
|
to: 'https://github.com/nuxt/ui/releases',
|
|
target: '_blank'
|
|
}])
|
|
</script>
|
|
|
|
<template>
|
|
<UHeader toggle-side="left">
|
|
<template #title>
|
|
<Logo class="h-6 w-auto" />
|
|
</template>
|
|
|
|
<UNavigationMenu :items="items" />
|
|
|
|
<template #right>
|
|
<UColorModeButton />
|
|
|
|
<UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
|
|
<UButton
|
|
color="neutral"
|
|
variant="ghost"
|
|
to="https://github.com/nuxt/ui"
|
|
target="_blank"
|
|
icon="i-simple-icons-github"
|
|
aria-label="GitHub"
|
|
/>
|
|
</UTooltip>
|
|
</template>
|
|
|
|
<template #body>
|
|
<UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
|
|
</template>
|
|
</UHeader>
|
|
</template>
|