feat: add header components and version switcher for docs

docs/components/AppHeader.vue

@@ -0,0 +1,103 @@
+<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 &rarr;
+      </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>