<template>
  <div class="min-h-screen bg-gray-50">
    <Header 
      @menu-click="toggleSidebar" 
      @manga-click="$emit('manga-click', $event)"
      @add-manga-click="$emit('add-manga-click', $event)"
    />
    <Sidebar 
      :is-open="isSidebarOpen" 
      @close="closeSidebar"
      @add-manga-click="$emit('add-manga-click', $event)"
    />
    
    <main class="pt-16 md:ml-60">
      <router-view></router-view>
    </main>
  </div>
</template>

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

const isSidebarOpen = ref(false);

const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value;
};

const closeSidebar = () => {
  isSidebarOpen.value = false;
};

defineEmits(['manga-click', 'add-manga-click']);
</script> 