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

const collapsed = ref(false)

function toggleSidebar() {
  collapsed.value = !collapsed.value
}
</script>

<template>
  <div class="flex h-screen overflow-hidden">
    <!-- Sidebar -->
    <aside
      class="flex-shrink-0 z-10"
      :style="{ width: collapsed ? '64px' : '256px', transition: 'width 0.25s ease' }"
    >
      <Sidebar :collapsed="collapsed" />
    </aside>

    <!-- Main area -->
    <div class="flex flex-col flex-1 overflow-hidden">
      <!-- Header -->
      <header class="flex-shrink-0" style="height: 64px;">
        <Header :collapsed="collapsed" @toggle-sidebar="toggleSidebar" />
      </header>

      <!-- Content -->
      <main class="flex-1 overflow-y-auto no-scrollbar" style="background: #f8fafc;">
        <router-view v-slot="{ Component, route }">
          <transition name="fade-slide" mode="out-in">
            <component :is="Component" :key="route.fullPath" />
          </transition>
        </router-view>
      </main>
    </div>
  </div>
</template>

<style>
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.fade-slide-enter-from { opacity: 0; transform: translateY(6px); }
.fade-slide-leave-to  { opacity: 0; transform: translateY(-6px); }
</style>
