ct/app/components/AppHeader.vue
2025-09-29 16:16:44 +08:00

63 lines
1.4 KiB
Vue

<script lang="ts" setup>
import type {NavigationMenuItem} from '@nuxt/ui'
const route = useRoute()
const items = computed<NavigationMenuItem[]>(() => [
{
label: 'Docs',
to: '/docs/getting-started',
active: route.path.startsWith('/docs/getting-started')
},
{
label: 'Components',
to: '/docs/components',
active: route.path.startsWith('/docs/components')
},
{
label: 'Figma',
to: 'https://go.nuxt.com/figma-ui',
target: '_blank'
},
{
label: 'Releases',
to: 'https://github.com/nuxt/ui/releases',
target: '_blank'
}
])
</script>
<template>
<UHeader>
<template #title>
<Logo class="h-6 w-auto"/>
</template>
<UNavigationMenu :items="items"/>
<template #right>
<ColorModeButton/>
<!-- <UTooltip :kbds="['meta', 'G']" text="Open on GitHub">-->
<!-- <UButton-->
<!-- aria-label="GitHub"-->
<!-- color="neutral"-->
<!-- icon="i-simple-icons-github"-->
<!-- target="_blank"-->
<!-- to="https://github.com/nuxt/ui"-->
<!-- variant="ghost"-->
<!-- />-->
<!-- </UTooltip>-->
</template>
<template #body>
<div class="px-4 py-2">
<UNavigationMenu
:items="items"
class="-mx-2.5"
orientation="vertical"
/>
</div>
</template>
</UHeader>
</template>