docs: restructure docs, update routes & navigation

docs/app/app.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { seo } = useAppConfig()
+const route = useRoute()
 
 const { data: navigation } = await useAsyncData('navigation', () => {
   return Promise.all([
@@ -85,17 +86,28 @@ const links = computed(() => [
       ]"
     />
 
-    <AppHeader />
-    <UMain class="relative">
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
-    </UMain>
-
-    <AppFooter />
+    <div :class="[route.path.startsWith('/docs/') && 'root']">
+      <AppHeader />
+      <UMain class="relative">
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+      </UMain>
+      <AppFooter />
+    </div>
 
     <ClientOnly>
       <LazyUContentSearch :files="files" :navigation="navigation" :links="links" />
     </ClientOnly>
   </UApp>
 </template>
+
+<style>
+/* Safelist (do not remove): [&>div]:*:my-0 [&>div]:*:w-full h-64 !px-0 !py-0 !pt-0 !pb-0 !p-0 !justify-start !justify-end !min-h-96 h-136 max-h-[341px] */
+
+@media (min-width: 1024px) {
+  .root {
+    --ui-header-height: 112px;
+  }
+}
+</style>

docs/app/assets/main.css

@@ -10,7 +10,7 @@
 
 @theme static {
   --font-sans: 'Public Sans', sans-serif;
-
+  --container-8xl: 90rem;
   --breakpoint-3xl: 1920px;
 
   --color-green-50: #EFFDF5;
@@ -25,3 +25,7 @@
   --color-green-900: #0A5331;
   --color-green-950: #052E16;
 }
+
+:root {
+  --ui-container: var(--container-8xl);
+}

docs/app/components/AppHeader.vue

@@ -57,10 +57,13 @@ const logoContextMenuItems = [
     }
   }]
 ]
+
+const headerBottomLinks = computed(() => (navigation.value.find(link => link.path === '/docs')?.children ?? [])
+  .map(link => ({ ...link, to: link.path, children: undefined, active: route.path.startsWith(link.path) })))
 </script>
 
 <template>
-  <UHeader>
+  <UHeader :ui="{ left: 'min-w-0' }" class="flex flex-col">
     <template #left>
       <UContextMenu :items="logoContextMenuItems" size="xs">
         <NuxtLink to="/" class="inline-flex items-end gap-2" aria-label="Back to home">
@@ -90,5 +93,17 @@ const logoContextMenuItems = [
         <UButton label="Get started" color="neutral" to="/docs/getting-started/installation" class="flex justify-center text-gray-900 bg-primary sm:hidden" external />
       </div>
     </template>
+    <template v-if="route.path.startsWith('/docs/')" #bottom>
+      <USeparator class="hidden lg:flex" />
+      <UContainer class="hidden lg:flex items-center justify-between">
+        <UNavigationMenu
+          :items="headerBottomLinks"
+          label-key="title"
+          variant="pill"
+          highlight
+          class="-mx-2.5 -mb-px"
+        />
+      </UContainer>
+    </template>
   </UHeader>
 </template>

docs/app/layouts/docs.vue

@@ -3,18 +3,67 @@ import type { ContentNavigationItem } from '@nuxt/content'
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const asideNavigation = computed(() => navigation.value.find(item => item.path === '/docs')?.children || [])
+const route = useRoute()
+
+const overviewMap: Record<string, string[]> = {
+  '/docs/getting-started': [
+    '/docs/getting-started',
+    '/docs/getting-started/installation',
+    '/docs/getting-started/deploy',
+    '/docs/getting-started/migration'
+  ],
+  '/docs/guides': [
+    '/docs/guides',
+    '/docs/guides/pre-rendering',
+    '/docs/guides/realtime'
+  ]
+}
+
+const asideNavigation = computed(() => {
+  const section = (navigation.value.find(l => l.path === '/docs')?.children ?? [])
+    .find(l => route.path.startsWith(l.path))
+
+  if (!section?.children) {
+    return []
+  }
+
+  const links = section.children
+  const overviewPaths = overviewMap[section.path]
+
+  // Section has no overview grouping → return normal links
+  if (!overviewPaths) {
+    return links
+  }
+
+  const overviewChildren = links
+    .filter(item => overviewPaths.includes(item.path))
+
+  const otherLinks = links
+    .filter(item => !overviewPaths.includes(item.path))
+
+  return [
+    {
+      title: 'Overview',
+      path: section.path,
+      children: overviewChildren,
+      defaultOpen: true
+    },
+    ...otherLinks
+  ]
+})
 </script>
 
 <template>
-  <UContainer>
-    <UPage>
-      <template #left>
-        <UPageAside>
-          <UContentNavigation :navigation="asideNavigation" highlight />
-        </UPageAside>
-      </template>
-      <slot />
-    </UPage>
-  </UContainer>
+  <UMain>
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UPageAside>
+            <UContentNavigation :navigation="asideNavigation" highlight />
+          </UPageAside>
+        </template>
+        <slot />
+      </UPage>
+    </UContainer>
+  </UMain>
 </template>