49 lines
1.5 KiB
Vue
Executable File
49 lines
1.5 KiB
Vue
Executable File
<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>
|
|
<div class="flex items-center gap-6">
|
|
<NuxtLink :to="header?.to || '/'" class="flex items-center">
|
|
<AppIcon size="32px" class="mt-1 mr-2" />
|
|
<AppLogo class="!text-2xl mt-1 hidden sm:block" />
|
|
</NuxtLink>
|
|
|
|
<TemplateMenu class="h-6" />
|
|
</div>
|
|
</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>
|