@isset($title)
    @section('title')
        {{ $title }}
    @endsection
@endisset

<div class="drawer">
    <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content flex flex-col">
        <!-- Navbar -->
        <div class="navbar bg-base-300 w-full">
            <div class="flex-none lg:hidden">
                <label for="my-drawer-3" aria-label="open sidebar" class="btn btn-square btn-ghost">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </label>
            </div>
            <div class="flex-1">
                <h1 class="text-2xl font-black ps-3">{{ config('app.name') }}</h1>
            </div>
            <div class="hidden flex-none lg:block">
                <ul class="menu menu-horizontal">
                    <!-- Navbar menu content here -->
                    <x-layouts.app.nav-items/>
                </ul>
            </div>
        </div>
        <!-- Page content here -->
        <div {{ $attributes->merge() }}>
            {{ $slot }}
        </div>
    </div>
    <div class="drawer-side">
        <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
        <ul class="menu bg-base-200 min-h-full w-80 p-4 relative pt-16">
            <div class="absolute w-full h-16 top-0">
                <div class="w-full h-full flex items-center">
                    <h1 class="text-2xl font-black ps-3">{{ config('app.name') }}</h1>
                </div>
            </div>
            <!-- Sidebar content here -->
            <x-layouts.app.nav-items/>
        </ul>
    </div>
</div>