<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"
    />

    <!-- 侧边栏 -->
    <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 -->
      <DocsHeader
        :is-sidebar-open="isSidebarOpen"
        :toggle-sidebar="toggleSidebar"
      />

      <!-- Main Content -->
      <UMain class="flex-1 overflow-y-auto">
        <div class="">
          <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>
