<template>
    <ClientOnly>
        <Sonner />
    </ClientOnly>
    <AppSidebar />
    <SidebarInset>
        <div class="flex flex-1">
            <div class="w-full">
                <header v-if="slots.header">
                    <slot name="header" />
                </header>
                <main class="h-screen">
                    <slot />
                </main>
            </div>
            <aside v-if="slots.sidebar" class="w-full hidden sm:block">
                <slot name="sidebar" />
            </aside>
        </div>
    </SidebarInset>
</template>

<script setup>
import { useSlots } from 'vue'
import 'vue-sonner/style.css'
import AppSidebar from '~/components/ui/sidebar/AppSidebar.vue';

import Sonner from '~/components/ui/sonner/Sonner.vue';
const slots = useSlots()
</script>
