开始主题设置

app/layouts/default.vue

@@ -1,5 +1,14 @@
 <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"
+    />
+    <AppSidebar 
+      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'"
+    />
     <!-- Mobile Sidebar (Drawer) -->
     <div 
       v-if="isSidebarOpen" 
@@ -14,11 +23,7 @@
     <!-- Right Content Area -->
     <div class="flex-1 lg:ml-64 flex flex-col">
       <!-- Fixed Header -->
-      <AppHeader 
-        class="fixed top-0 right-0 z-30 transition-all duration-300"
-        :class="{ 'left-0': !isSidebarOpen, 'lg:left-64': true }"
-        @toggle-sidebar="isSidebarOpen = !isSidebarOpen" 
-      />
+      <AppHeader />
       
       <!-- Main Content -->
       <main class="flex-1 overflow-y-auto pt-16">