{{-- Mobile backdrop --}}
<div x-cloak x-show="sidebarOpen || sidebarNavigating" x-transition.opacity @click="sidebarOpen = false"
     class="fixed inset-0 z-40 bg-black/50 lg:hidden">
    <div x-show="sidebarNavigating" x-transition.opacity class="flex items-center justify-center h-full">
        <svg class="h-8 w-8 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
    </div>
</div>

{{-- Desktop sidebar: normal flow element in the flex row --}}
<aside class="hidden lg:block lg:w-72 xl:w-80 lg:shrink-0 lg:self-start lg:sticky lg:top-4 lg:max-h-[calc(100vh-6rem)] lg:overflow-y-auto scrollbar-none">
    <nav class="pb-6">
        @include('partials._sidebar-content')
    </nav>
</aside>

{{-- Mobile sidebar: fixed slide-over from right --}}
<aside x-show="sidebarOpen" x-cloak
       x-transition:enter="transition ease-out duration-300"
       x-transition:enter-start="translate-x-full rtl:-translate-x-full"
       x-transition:enter-end="translate-x-0"
       x-transition:leave="transition ease-in duration-200"
       x-transition:leave-start="translate-x-0"
       x-transition:leave-end="translate-x-full rtl:-translate-x-full"
       @click="
           let link = $event.target.closest('a[href]');
           if (link && !link.hasAttribute('target')) {
               $event.preventDefault();
               sidebarOpen = false;
               sidebarNavigating = true;
               setTimeout(() => { window.location.href = link.href }, 250);
           }
       "
       class="fixed inset-0 md:inset-y-0 md:right-0 md:left-auto md:w-80 rtl:md:right-auto rtl:md:left-0 z-50 bg-white dark:bg-gray-800 md:shadow-xl overflow-y-auto lg:hidden">

    <nav class="px-4 pb-6">
        @include('partials._sidebar-content')
    </nav>
</aside>