@props(['activeClass' => 'bg-gray-100 text-gray-900'])
<div id="sidebarWrapper" {{$attributes->merge([ 'class' => 'border-r border-r-gray-300 transition-all group duration-300 ease-in-out w-64 relative z-10'])}}>
    <div class="hidden md:flex w-max h-screen items-center">
        <div id="sidebar" class="flex flex-col p-4 pt-6 justify-between font-medium h-full w-full overflow-hidden transition-all duration-300 ease-in-out">
          {{$slot}}
        </div>

        {{-- Toggle Button --}}
        <div class="text-gray-500 cursor-pointer hover:text-gray-900 rounded-full p-1.5 bg-white border border-gray-300 absolute -right-3.5 top-21 z-30">
            <x-heroicon-c-chevron-left id="closeSidebarBtn" class="w-4"/>
            <x-heroicon-c-chevron-right id="openSidebarBtn" class="w-4 hidden"/>
        </div>
    </div>
</div>
@push('scripts')
    @vite(['resources/js/sidebar.js'])
@endpush