修改页面布局大修改

app/layouts/blog.vue

@@ -8,7 +8,7 @@
     />
 
     <!-- 侧边栏 -->
-    <AppSidebar
+    <BlogSidebar
       class="fixed top-0 bottom-0 z-50 transition-transform duration-300 ease-in-out"
       :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
     />

app/layouts/docs.vue

@@ -1,22 +1,46 @@
-<script setup lang="ts">
-import type { ContentNavigationItem } from '@nuxt/content'
-
-const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
-</script>
-
 <template>
-  <UContainer>
-    <UPage>
-      <template #left>
-        <UPageAside>
-          <UContentNavigation
-            highlight
-            :navigation="navigation"
-          />
-        </UPageAside>
-      </template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
+    <!-- 移动端遮罩层 -->
+    <div
+      v-if="isSidebarOpen"
+      class="fixed inset-0 bg-gray-900/50 z-40 lg:hidden"
+      @click="isSidebarOpen = false"
+    />
 
-      <slot />
-    </UPage>
-  </UContainer>
+    <!-- 侧边栏 -->
+    <DocsSidebar
+      class="fixed top-0 bottom-0 z-50 transition-transform duration-300 ease-in-out"
+      :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
+    />
+
+    <!-- Right Content Area -->
+    <div class="flex-1 lg:ml-64 flex flex-col min-w-0">
+      <!-- Fixed Header -->
+      <AppHeader
+        :is-sidebar-open="isSidebarOpen"
+        :toggle-sidebar="toggleSidebar"
+      />
+
+      <!-- Main Content -->
+      <UMain class="flex-1 overflow-y-auto">
+        <div class="mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <slot />
+        </div>
+      </UMain>
+
+      <!-- Footer -->
+      <AppFooter />
+    </div>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isSidebarOpen = ref(false)
+
+// 切换侧边栏
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value
+}
+</script>