docs: migrate to @nuxthq/ui-kit (#405)

Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/app.vue

@@ -1,17 +1,41 @@
 <template>
   <div>
-    <Header />
+    <UHeader>
+      <template #left>
+        <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+          <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
 
-    <UContainer class="grid lg:grid-cols-10 lg:gap-8">
-      <DocsAside class="lg:col-span-2" />
+          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary-500 dark:sm:text-primary-400">UI</span>
+        </NuxtLink>
+      </template>
 
-      <div class="lg:col-span-8 min-h-0 flex flex-col">
+      <template #center>
+        <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
+      </template>
+
+      <template #right>
+        <ColorPicker />
+
+        <UColorModeButton />
+
+        <USocialButton to="https://twitter.com/nuxtlabs" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
+        <USocialButton to="https://github.com/nuxtlabs/ui" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
+      </template>
+
+      <template #links>
+        <UDocsAsideAnchors :links="anchors" />
+        <UDocsAsideLinks :links="navigation" />
+      </template>
+    </UHeader>
+
+    <UContainer>
+      <UDocsLayout :links="navigation" :anchors="anchors">
         <NuxtPage />
-      </div>
+      </UDocsLayout>
     </UContainer>
 
     <ClientOnly>
-      <DocsSearch />
+      <UDocsSearch :files="files" :links="navigation" />
     </ClientOnly>
 
     <UNotifications />
@@ -22,9 +46,24 @@
 const colorMode = useColorMode()
 
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), { default: () => [] })
 
 provide('navigation', navigation)
 
+const anchors = [{
+  label: 'Documentation',
+  icon: 'i-heroicons-book-open-solid',
+  to: '/getting-started'
+}, {
+  label: 'Playground',
+  icon: 'i-simple-icons-stackblitz',
+  to: 'https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue'
+}, {
+  label: 'Releases',
+  icon: 'i-heroicons-rocket-launch-solid',
+  to: 'https://github.com/nuxtlabs/ui/releases'
+}]
+
 // Computed
 
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
@@ -38,7 +77,6 @@ useHead({
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
-    { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
     { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
   ],
   htmlAttrs: {