103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
const appConfig = useAppConfig()
|
|
const { forced: forcedColorMode } = useDocusColorMode()
|
|
|
|
const { isEnabled: isAssistantEnabled } = useAssistant()
|
|
const { isEnabled, locales } = useDocusI18n()
|
|
const { subNavigationMode } = useSubNavigation()
|
|
|
|
const links = computed(() => {
|
|
const list = []
|
|
if (appConfig.socials?.gitea) {
|
|
list.push({
|
|
'icon': 'i-simple-icons-gitea',
|
|
'to': appConfig.socials.gitea,
|
|
'target': '_blank',
|
|
'aria-label': 'Gitea',
|
|
})
|
|
}
|
|
if (appConfig.github?.url) {
|
|
list.push({
|
|
'icon': 'i-simple-icons-github',
|
|
'to': appConfig.github.url,
|
|
'target': '_blank',
|
|
'aria-label': 'GitHub',
|
|
})
|
|
}
|
|
return list
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UHeader
|
|
:ui="{ center: 'flex-1' }"
|
|
:class="{ 'flex flex-col': subNavigationMode === 'header' }"
|
|
>
|
|
<AppHeaderCenter />
|
|
|
|
<template #left>
|
|
<AppHeaderLeft />
|
|
</template>
|
|
|
|
<template #right>
|
|
<AppHeaderCTA />
|
|
|
|
<template v-if="isAssistantEnabled">
|
|
<AssistantChat />
|
|
</template>
|
|
|
|
<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 v-if="!forcedColorMode">
|
|
<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>
|
|
|
|
<template
|
|
v-if="subNavigationMode === 'header'"
|
|
#bottom
|
|
>
|
|
<AppHeaderBottom />
|
|
</template>
|
|
</UHeader>
|
|
</template>
|