fix: properly extend Docus AppHeader with version banner

Copy the full Docus AppHeader component and add the version warning
banner at the top, instead of completely replacing the header.

Author: ManukMinasyan

docs/components/AppHeader.vue

@@ -1,23 +1,102 @@
 <script setup lang="ts">
+import { useDocusI18n } from '#imports'
+
 const appConfig = useAppConfig()
-const currentVersion = appConfig.versioning?.current || 'v3'
-const isOldVersion = currentVersion !== 'v3'
+const site = useSiteConfig()
+
+const { localePath, isEnabled, locales } = useDocusI18n()
+
+const links = computed(() => appConfig.github && appConfig.github.url
+  ? [
+      {
+        'icon': 'i-simple-icons-github',
+        'to': appConfig.github.url,
+        'target': '_blank',
+        'aria-label': 'GitHub',
+      },
+    ]
+  : [])
+
+const currentVersion = computed(() => appConfig.versioning?.current || 'v3')
+const isOldVersion = computed(() => currentVersion.value !== 'v3')
 </script>
 
 <template>
-    <div>
-        <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 Flowforge {{ currentVersion }}.
-            <a
-                href="/flowforge/"
-                class="underline font-medium hover:text-amber-900 dark:hover:text-amber-100"
-            >
-                View the latest version (v3) &rarr;
-            </a>
-        </div>
-        <DocsHeader />
+  <div>
+    <!-- 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 Flowforge {{ currentVersion }}.
+      <a
+        href="/flowforge/"
+        class="underline font-medium hover:text-amber-900 dark:hover:text-amber-100"
+      >
+        View the latest version (v3) &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>
+        <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>