104 lines
2.6 KiB
Vue
104 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { useDocusI18n } from '#imports'
|
|
|
|
const appConfig = useAppConfig()
|
|
const site = useSiteConfig()
|
|
|
|
const { localePath, isEnabled, locales } = useDocusI18n()
|
|
const { currentVersion, isOldVersion, loadVersions } = useVersions()
|
|
|
|
onMounted(() => loadVersions())
|
|
|
|
const links = computed(() => appConfig.github && appConfig.github.url
|
|
? [
|
|
{
|
|
'icon': 'i-simple-icons-github',
|
|
'to': appConfig.github.url,
|
|
'target': '_blank',
|
|
'aria-label': 'GitHub',
|
|
},
|
|
]
|
|
: [])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="sticky top-0 z-50">
|
|
<!-- Version Warning Banner -->
|
|
<div
|
|
v-if="isOldVersion"
|
|
class="bg-amber-100 dark:bg-amber-900/50 text-amber-800 dark:text-amber-200 px-4 py-2 text-center text-sm border-b border-amber-200 dark:border-amber-800"
|
|
>
|
|
You are viewing documentation for Comments {{ currentVersion }}.
|
|
<a
|
|
href="/comments/"
|
|
class="underline font-medium hover:text-amber-900 dark:hover:text-amber-100"
|
|
>
|
|
View the latest version →
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Original Docus Header -->
|
|
<UHeader
|
|
:ui="{ center: 'flex-1' }"
|
|
:to="localePath('/')"
|
|
:title="appConfig.header?.title || site.name"
|
|
>
|
|
<AppHeaderCenter />
|
|
|
|
<template #title>
|
|
<AppHeaderLogo class="h-6 w-auto shrink-0" />
|
|
</template>
|
|
|
|
<template #right>
|
|
<AppVersionSwitcher />
|
|
<AppHeaderCTA />
|
|
|
|
<template v-if="isEnabled && locales.length > 1">
|
|
<ClientOnly>
|
|
<LanguageSelect />
|
|
|
|
<template #fallback>
|
|
<div class="h-8 w-8 animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-md" />
|
|
</template>
|
|
</ClientOnly>
|
|
|
|
<USeparator
|
|
orientation="vertical"
|
|
class="h-8"
|
|
/>
|
|
</template>
|
|
|
|
<UContentSearchButton class="lg:hidden" />
|
|
|
|
<ClientOnly>
|
|
<UColorModeButton />
|
|
|
|
<template #fallback>
|
|
<div class="h-8 w-8 animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-md" />
|
|
</template>
|
|
</ClientOnly>
|
|
|
|
<template v-if="links?.length">
|
|
<UButton
|
|
v-for="(link, index) of links"
|
|
:key="index"
|
|
v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
|
|
/>
|
|
</template>
|
|
</template>
|
|
|
|
<template #toggle="{ open, toggle }">
|
|
<IconMenuToggle
|
|
:open="open"
|
|
class="lg:hidden"
|
|
@click="toggle"
|
|
/>
|
|
</template>
|
|
|
|
<template #body>
|
|
<AppHeaderBody />
|
|
</template>
|
|
</UHeader>
|
|
</div>
|
|
</template>
|