Stelle docs-site auf Nuxt-UI-Docs-Template-Stil um

docs-site/app/components/AppFooter.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { footer } = useAppConfig()
+</script>
+
+<template>
+  <UFooter>
+    <template #left>
+      {{ footer.credits }}
+    </template>
+
+    <template #right>
+      <UColorModeButton v-if="footer?.colorMode" />
+
+      <template v-if="footer?.links">
+        <UButton
+          v-for="(link, index) of footer?.links"
+          :key="index"
+          v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+  </UFooter>
+</template>

docs-site/app/components/AppHeader.vue

@@ -0,0 +1,49 @@
+<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 #left>
+      <NuxtLink :to="header?.to || '/'">
+        <AppLogo class="w-auto h-6 shrink-0" />
+      </NuxtLink>
+    </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>

docs-site/app/components/AppLogo.vue

@@ -0,0 +1,3 @@
+<template>
+  <span class="font-semibold text-primary">FEDEO Docs</span>
+</template>