mirror of
https://github.com/nuxt/ui.git
synced 2026-09-14 19:51:10 +08:00
Mike Newbon
5fd94e1365
Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com>
84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const { desktopLinks } = useHeader()
|
|
const { open } = useChat()
|
|
const { track } = useAnalytics()
|
|
// The Ask-AI button skins to the applied icon pack, like the rest of the
|
|
// studio chrome (the theme applies site-wide, so this stays consistent).
|
|
const studioIcons = useStudioIcons()
|
|
|
|
function toggleChat() {
|
|
if (!open.value) {
|
|
track('AI Chat Opened', { source: 'header' })
|
|
}
|
|
open.value = !open.value
|
|
}
|
|
</script>
|
|
|
|
<!-- eslint-disable vue/no-template-shadow -->
|
|
<template>
|
|
<UHeader
|
|
:ui="{
|
|
left: 'min-w-0',
|
|
right: 'gap-0.5',
|
|
container: [route.path.startsWith('/blog/') ? 'max-w-none' : '']
|
|
}"
|
|
class="flex flex-col"
|
|
>
|
|
<template #left>
|
|
<HeaderLogo />
|
|
|
|
<VersionMenu />
|
|
</template>
|
|
|
|
<UNavigationMenu :items="desktopLinks" variant="link" content-orientation="vertical" />
|
|
|
|
<template #right>
|
|
<UTooltip text="Search" :kbds="['meta', 'K']" ignore-non-keyboard-focus>
|
|
<UContentSearchButton />
|
|
</UTooltip>
|
|
|
|
<UTooltip text="Ask AI" :kbds="['meta', 'I']" ignore-non-keyboard-focus>
|
|
<UButton
|
|
color="neutral"
|
|
variant="ghost"
|
|
:icon="studioIcons.assistant"
|
|
aria-label="Ask AI for help"
|
|
@click="toggleChat"
|
|
/>
|
|
</UTooltip>
|
|
|
|
<!-- lazy for the theme engine it pulls, hydrated on idle: a plain
|
|
`Lazy` drops the server-rendered button until the chunk lands -->
|
|
<LazyThemeStudioPresetPicker hydrate-on-idle />
|
|
|
|
<UTooltip text="Open on GitHub" class="hidden lg:flex" ignore-non-keyboard-focus>
|
|
<UButton
|
|
color="neutral"
|
|
variant="ghost"
|
|
to="https://github.com/nuxt/ui"
|
|
target="_blank"
|
|
icon="i-simple-icons-github"
|
|
aria-label="GitHub"
|
|
/>
|
|
</UTooltip>
|
|
</template>
|
|
|
|
<template #toggle="{ open, toggle, ui }">
|
|
<HeaderToggleButton
|
|
:open="open"
|
|
:class="ui.toggle({ toggleSide: 'right' })"
|
|
@click="toggle"
|
|
/>
|
|
</template>
|
|
|
|
<template #body>
|
|
<HeaderBody />
|
|
</template>
|
|
|
|
<template v-if="route.path.startsWith('/docs/')" #bottom>
|
|
<HeaderBottom />
|
|
</template>
|
|
</UHeader>
|
|
</template>
|