<script setup lang="ts">
import { usePage } from '@inertiajs/vue3';
import AppSidebar from '@/components/AppSidebar.vue';
import MobileBottomNav from '@/components/MobileBottomNav.vue';
import { Separator } from '@/components/ui/separator';
import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
} from '@/components/ui/sidebar';
import UserNav from '@/components/UserNav.vue';

defineProps<{
    title?: string;
}>();

const page = usePage();
</script>

<template>
    <SidebarProvider :default-open="page.props.sidebarOpen">
        <AppSidebar />
        <SidebarInset>
            <header class="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
                <SidebarTrigger class="-ml-1" />
                <Separator orientation="vertical" class="mr-2 h-4" />
                <h1 v-if="title" class="text-lg font-semibold">
                    {{ title }}
                </h1>
                <div class="ml-auto">
                    <UserNav />
                </div>
            </header>
            <div class="flex min-w-0 flex-1 flex-col gap-4 overflow-y-auto p-4 pb-24 lg:pb-4">
                <slot />
            </div>
        </SidebarInset>
        <MobileBottomNav />
    </SidebarProvider>
</template>
