docs: add children in components route

docs/app/components/Header.vue

@@ -25,7 +25,7 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
 </script>
 
 <template>
-  <UHeader :ui="{ left: 'min-w-0' }" mode="drawer" :menu="{ shouldScaleBackground: true }">
+  <UHeader :ui="{ left: 'min-w-0' }" :menu="{ shouldScaleBackground: true }">
     <template #left>
       <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-(--ui-text-highlighted) min-w-0 focus-visible:outline-(--ui-primary) shrink-0" aria-label="Nuxt UI">
         <LogoPro class="w-auto h-6 shrink-0 ui-pro-only" />

docs/app/composables/useLinks.ts

@@ -9,7 +9,44 @@ export function useLinks() {
   }, {
     label: 'Components',
     icon: 'i-lucide-square-code',
-    to: '/components'
+    to: '/components',
+    children: [{
+      label: 'Layout',
+      to: '/components#layout',
+      description: 'Container, grid, divider and responsive layout.',
+      icon: 'i-lucide-layout',
+      active: route.fullPath === '/components#layout'
+    }, {
+      label: 'Form',
+      to: '/components#form',
+      description: 'Input, select, checkbox, radio and form validation.',
+      icon: 'i-lucide-text-cursor-input',
+      active: route.fullPath === '/components#form'
+    }, {
+      label: 'Element',
+      to: '/components#element',
+      description: 'Button, badge, icon, alert, and small UI elements.',
+      icon: 'i-lucide-mouse-pointer',
+      active: route.fullPath === '/components#element'
+    }, {
+      label: 'Data',
+      to: '/components#data',
+      description: 'Table, list, card, carousel and visualization elements.',
+      icon: 'i-lucide-table',
+      active: route.fullPath === '/components#data'
+    }, {
+      label: 'Navigation',
+      to: '/components#navigation',
+      description: 'Menu, breadcrumb, pagination and navbar.',
+      icon: 'i-lucide-link',
+      active: route.fullPath === '/components#navigation'
+    }, {
+      label: 'Overlay',
+      to: '/components#overlay',
+      description: 'Modal, tooltip, dialog and popover.',
+      icon: 'i-lucide-layers',
+      active: route.fullPath === '/components#overlay'
+    }]
   }, {
     label: 'Pro',
     icon: 'i-lucide-panels-top-left',