From 7f1cf5c71fa35894d1e11c37a1a2935a6f35a970 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <atinux@gmail.com>
Date: Fri, 21 Feb 2025 16:15:17 +0100
Subject: [PATCH] docs: add children in components route

---
 docs/app/components/Header.vue   |  2 +-
 docs/app/composables/useLinks.ts | 39 +++++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue
index 97fbc48f..b16e942c 100644
--- a/docs/app/components/Header.vue
+++ b/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" />
diff --git a/docs/app/composables/useLinks.ts b/docs/app/composables/useLinks.ts
index 107ea8e9..ef30e33b 100644
--- a/docs/app/composables/useLinks.ts
+++ b/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',