{{-- Desktop sidebar (collapsible) + mobile drawer. Kept in place across wire:navigate via @persist. --}}
<div x-data>
    {{-- Desktop --}}
    <aside class="no-print fixed inset-y-0 left-0 z-40 hidden w-64 flex-col bg-ink-900 shadow-xl transition-[width] duration-200 lg:flex sidebar-collapsed:w-20"
           aria-label="Sidebar">
        <x-layouts.partials.brand />
        <nav x-data="sidebarNav" class="flex-1 overflow-y-auto overflow-x-hidden px-3 pb-6" aria-label="Main navigation">
            <x-layouts.partials.nav-items :mobile="false" />
        </nav>
        <div class="border-t border-white/10 p-3">
            <button type="button" x-on:click="$store.layout.toggleCollapsed()" class="nav-link w-full"
                    aria-label="Collapse sidebar" :aria-label="$store.layout.collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
                    :title="$store.layout.collapsed ? 'Expand sidebar' : 'Collapse sidebar'">
                <span class="inline-flex sidebar-collapsed:hidden"><x-icon name="chevron-double-left" /></span>
                <span class="hidden sidebar-collapsed:inline-flex"><x-icon name="chevron-double-right" /></span>
                <span class="truncate sidebar-collapsed:hidden">Collapse</span>
            </button>
        </div>
    </aside>

    {{-- Mobile drawer --}}
    <div x-show="$store.layout.mobileOpen" x-cloak class="relative z-50 lg:hidden" role="dialog" aria-modal="true" aria-label="Navigation">
        <div x-show="$store.layout.mobileOpen" x-transition.opacity class="fixed inset-0 bg-slate-900/60" x-on:click="$store.layout.closeMobile()"></div>
        <aside x-show="$store.layout.mobileOpen" x-trap.inert.noscroll="$store.layout.mobileOpen"
               x-on:keydown.escape.window="$store.layout.closeMobile()"
               x-transition:enter="transition ease-out duration-200" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0"
               x-transition:leave="transition ease-in duration-150" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full"
               class="fixed inset-y-0 left-0 flex w-72 flex-col bg-ink-900">
            <div class="flex items-center justify-between pr-3">
                <x-layouts.partials.brand :mobile="true" />
                <button type="button" class="btn-icon text-slate-400 hover:bg-white/10 hover:text-white" x-on:click="$store.layout.closeMobile()">
                    <x-icon name="x-mark" /><span class="sr-only">Close navigation</span>
                </button>
            </div>
            <nav x-data="sidebarNav" class="flex-1 overflow-y-auto px-3 pb-6" aria-label="Main navigation (mobile)">
                <x-layouts.partials.nav-items :mobile="true" />
            </nav>
        </aside>
    </div>
</div>