<template>
  <el-container class="app-layout">
    <Sidebar :collapsed="sidebarCollapsed" />
    <el-container direction="vertical" class="layout-right">
      <AppHeader :collapsed="sidebarCollapsed" @update:collapsed="sidebarCollapsed = $event" />
      <el-main class="main-content">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import Sidebar from './Sidebar.vue'
import AppHeader from './AppHeader.vue'

const sidebarCollapsed = ref(false)
</script>

<style scoped>
.app-layout {
  min-height: 100vh;
}
.layout-right {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1;
  padding: 20px;
  background: #f0f2f5;
  overflow: auto;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
