@extends('layout.dashboard.master')

@section('content')

<div class="flex grow w-full h-full" id="root">

    <livewire:livewire.notifications.details />

    <!-- THE RESPONSIVE WRAPPER -->
    <div class="flex grow w-full"
         style="
            --sidebar-width: 300px;
            --sidebar-collapsed-width: 60px;
            --header-height: 60px;
            --toolbar-height: 54px;
            --header-height-mobile: 60px;
        ">

        {{-- Header (fixed top) --}}
        @include('layout.dashboard.header')

        {{-- Sidebar --}}
        @include('layout.dashboard.aside')

        <!-- MAIN CONTENT -->
        <div class="
            flex flex-col grow

            {{ (request()->routeIs('calendar')) ? '' : 'bg-gray-100' }}

            overflow-y-auto
            transition-all duration-300

            pt-(--header-height-mobile)
            lg:pt-[calc(var(--header-height)+var(--toolbar-height))]

            lg:ps-(--sidebar-width)
            lg:in-data-[sidebar-open=false]:ps-(--sidebar-collapsed-width)
        ">

            <main class="grow p-4 lg:p-6" role="content">
                {{ $slot }}
            </main>

        </div>
    </div>
</div>

@endsection