新建项目,集成官方docs,初次提交
This commit is contained in:
72
app/components/AppHeader.vue
Normal file
72
app/components/AppHeader.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import type { ContentNavigationItem } from '@nuxt/content'
|
||||
|
||||
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
|
||||
|
||||
const { header } = useAppConfig()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UHeader
|
||||
:ui="{ center: 'flex-1' }"
|
||||
:to="header?.to || '/'"
|
||||
>
|
||||
<UContentSearchButton
|
||||
v-if="header?.search"
|
||||
:collapsed="false"
|
||||
class="w-full"
|
||||
/>
|
||||
|
||||
<template
|
||||
v-if="header?.logo?.dark || header?.logo?.light || header?.title"
|
||||
#title
|
||||
>
|
||||
<UColorModeImage
|
||||
v-if="header?.logo?.dark || header?.logo?.light"
|
||||
:light="header?.logo?.light!"
|
||||
:dark="header?.logo?.dark!"
|
||||
:alt="header?.logo?.alt"
|
||||
class="h-6 w-auto shrink-0"
|
||||
/>
|
||||
|
||||
<span v-else-if="header?.title">
|
||||
{{ header.title }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-else
|
||||
#left
|
||||
>
|
||||
<NuxtLink :to="header?.to || '/'">
|
||||
<LogoPro class="w-auto h-6 shrink-0" />
|
||||
</NuxtLink>
|
||||
|
||||
<TemplateMenu />
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<UContentSearchButton
|
||||
v-if="header?.search"
|
||||
class="lg:hidden"
|
||||
/>
|
||||
|
||||
<UColorModeButton v-if="header?.colorMode" />
|
||||
|
||||
<template v-if="header?.links">
|
||||
<UButton
|
||||
v-for="(link, index) of header.links"
|
||||
:key="index"
|
||||
v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<UContentNavigation
|
||||
highlight
|
||||
:navigation="navigation"
|
||||
/>
|
||||
</template>
|
||||
</UHeader>
|
||||
</template>
|
Reference in New Issue
Block a user