<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'"
    />
    
    <!-- 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'
import { useRoute } from 'vue-router'
import { watch } from 'vue'

const isSidebarOpen = ref(false)

// 切换侧边栏
const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value
}


</script>