修改移动端侧边导航栏

app/components/AppHeader.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import type { NavigationMenuItem } from '@nuxt/ui'
+// import type { NavigationMenuItem } from '@nuxt/ui'
+import type { ContentNavigationItem } from "@nuxt/content";
+const navigation = inject<Ref<ContentNavigationItem[]>>("navigation");
 
 const isSettingsOpen = ref(false);
 const isLoginModalOpen = ref(false);
@@ -36,10 +38,11 @@ const handleLoginRegister = (type: "login" | "register") => {
       <LogoPro class="h-5 w-auto" />
     </template>
     
-    <UNavigationMenu :items="items" />
+    
     <template #body>
-      <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
-      <ContentDirectory />
+      <DocsAsideLeftTop />
+      <div>-----</div>
+      <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" />
     </template>
 
     <template #right>
@@ -83,7 +86,7 @@ const handleLoginRegister = (type: "login" | "register") => {
 
   <!-- Theme Settings Panel -->
   <ThemeSettings :is-open="isSettingsOpen" @close="isSettingsOpen = false" />
-  
+
   <!-- 登录模态框 -->
   <UModal v-model:open="isLoginModalOpen" title="登录" :dismissible="false">
     <template #body>

app/components/AppSidebar.vue

@@ -42,7 +42,7 @@
 
       <!-- 总目录及展示页导航 -->
       <div class="flex items-center px-8 p-1">
-        <ContentDirectory />
+        <DocsAsideLeftTop />
       </div>
 
       <!-- 分隔线 -->
@@ -59,30 +59,6 @@
 <script setup lang="ts">
 import type { ContentNavigationItem } from "@nuxt/content";
 const { header } = useAppConfig();
-// const searchQuery = ref("");
-
-// 折叠状态管理
-// const expandedGroups = ref<Set<string>>(new Set())
-
-// 切换分组展开状态
-// const toggleGroup = (groupPath: string) => {
-//   if (expandedGroups.value.has(groupPath)) {
-//     expandedGroups.value.delete(groupPath)
-//   } else {
-//     expandedGroups.value.add(groupPath)
-//   }
-// }
-
-// 检查分组是否展开
-// const isGroupExpanded = (groupPath: string) => {
-//   return expandedGroups.value.has(groupPath)
-// }
-
-// // 使用官方的 queryCollectionNavigation 方法获取导航数据
-// const { data: navigation, pending, error, refresh } = await useAsyncData('content-navigation', () => {
-//   return queryCollectionNavigation('docs', ['description'])
-// })
-
 const navigation = inject<Ref<ContentNavigationItem[]>>("navigation");
 
 // const handleSearch = () => {

app/components/docs/DocsAsideLeftTop.vue

@@ -15,5 +15,5 @@ const items = computed<NavigationMenuItem[]>(() => [{
 </script>
 
 <template>
-  <div />
+  <UNavigationMenu orientation="vertical" :items="items" class="data-[orientation=vertical]:w-64" />
 </template>