新增docsAsideleftTop组件

app/components/AppHeader.vue

@@ -41,7 +41,7 @@ const handleLoginRegister = (type: "login" | "register") => {
     
     <template #body>
       <DocsAsideLeftTop />
-      <div>-----</div>
+      <div class="mt-4 mb-4 border-t border-gray-200 dark:border-gray-700 w-9/10 mx-5" />
       <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" />
     </template>
 

app/components/AppSidebar.vue

@@ -38,11 +38,9 @@
           <Icon name="lucide-home" class="text-primary mr-2" size="20" />
           站点首页
         </NuxtLink>
-      </div>
+        <div class="px-2">
-
+          <DocsAsideLeftTop />
-      <!-- 总目录及展示页导航 -->
+        </div>   
-      <div class="flex items-center px-8 p-1">
-        <DocsAsideLeftTop />
       </div>
 
       <!-- 分隔线 -->

app/components/docs/DocsAsideLeftTop.vue

@@ -1,19 +1,99 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 const route = useRoute()
-const items = computed<NavigationMenuItem[]>(() => [{
+const items = ref<NavigationMenuItem[][]>([
-  label: 'Docs',
+  [
-  to: '/getting-started',
+    {
-  icon: 'i-lucide-book-open',
+      label: 'Guide',
-  active: route.path.startsWith('/getting-started')
+      icon: 'i-lucide-book-open',
-}, {
+    },
-  label: 'essentials',
+    {
-  to: '/essentials',
+      label: 'Composables',
-  icon: 'i-lucide-box',
+      icon: 'i-lucide-database',
-  active: route.path.startsWith('/1.essentials')
+      children: [
-}, ])
+        {
+          label: 'defineShortcuts',
+          icon: 'i-lucide-file-text',
+          description: 'Define shortcuts for your application.',
+          to: '/composables/define-shortcuts'
+        },
+        {
+          label: 'useOverlay',
+          icon: 'i-lucide-file-text',
+          description: 'Display a modal/slideover within your application.',
+          to: '/composables/use-overlay'
+        },
+        {
+          label: 'useToast',
+          icon: 'i-lucide-file-text',
+          description: 'Display a toast within your application.',
+          to: '/composables/use-toast'
+        }
+      ]
+    },
+    {
+      label: 'Components',
+      icon: 'i-lucide-box',
+      to: '/components',
+      active: true,
+      children: [
+        {
+          label: 'Link',
+          icon: 'i-lucide-file-text',
+          description: 'Use NuxtLink with superpowers.',
+          to: '/components/link'
+        },
+        {
+          label: 'Modal',
+          icon: 'i-lucide-file-text',
+          description: 'Display a modal within your application.',
+          to: '/components/modal'
+        },
+        {
+          label: 'NavigationMenu',
+          icon: 'i-lucide-file-text',
+          description: 'Display a list of links.',
+          to: '/components/navigation-menu'
+        },
+        {
+          label: 'Pagination',
+          icon: 'i-lucide-file-text',
+          description: 'Display a list of pages.',
+          to: '/components/pagination'
+        },
+        {
+          label: 'Popover',
+          icon: 'i-lucide-file-text',
+          description: 'Display a non-modal dialog that floats around a trigger element.',
+          to: '/components/popover'
+        },
+        {
+          label: 'Progress',
+          icon: 'i-lucide-file-text',
+          description: 'Show a horizontal bar to indicate task progression.',
+          to: '/components/progress'
+        }
+      ]
+    }
+  ],
+  [
+    {
+      label: 'GitHub',
+      icon: 'i-simple-icons-github',
+      badge: '3.8k',
+      to: 'https://github.com/nuxt/ui',
+      target: '_blank',
+    },
+    {
+      label: 'Help',
+      icon: 'i-lucide-circle-help',
+      badge: '3.8k',
+      disabled: true
+    }
+  ]
+])
 </script>
 
 <template>
-  <UNavigationMenu orientation="vertical" :items="items" class="data-[orientation=vertical]:w-64" />
+  <UNavigationMenu orientation="vertical" :items="items" class="w-full justify-center" color="primary" />
 </template>