docs: add children in components route

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',