@php
/* In-flow on lg (inside app layout flex row) so main content gets remaining width. Mobile uses separate fixed panel below. */
$aside = 'relative z-40 flex h-full min-h-0 flex-col overflow-y-auto border-r border-sidebar-border bg-sidebar transition-[width] duration-300 ease-in-out [scrollbar-width:thin]';
$brand = 'flex h-16 flex-shrink-0 items-center border-b border-sidebar-border px-3';
$toggle = 'flex w-full items-center justify-center rounded-lg bg-muted p-2 text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground dark:bg-white/10 dark:text-sidebar-foreground dark:hover:bg-white/20 dark:hover:text-sidebar-accent-foreground';
$mobile = 'fixed inset-y-0 left-0 z-40 flex w-64 flex-col overflow-y-auto border-r border-sidebar-border bg-sidebar [scrollbar-width:thin] lg:hidden';
$logo = 'opacity-[0.88] dark:brightness-0 dark:invert dark:opacity-[0.92]';
@endphp

<aside
    data-admin-sidebar
    x-data
    :class="$store.sidebar.collapsed ? 'w-16' : 'w-64'"
    class="{{ $aside }} w-64"
    aria-label="Main navigation"
    @keydown.escape.window="$store.sidebar.closeMobile()">
    <div class="{{ $brand }} justify-center overflow-hidden">
        <div
            data-sidebar-logo-icon
            x-show="$store.sidebar.collapsed"
            class="flex w-full items-center justify-center">
            <x-common.logo-icon class="h-7 w-7 shrink-0 object-cover object-left" mobile-view="true" />
        </div>

        <div
            data-sidebar-logo-full
            x-show="!$store.sidebar.collapsed"
            x-transition:enter="transition-opacity duration-200"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition-opacity duration-100"
            x-transition:leave-end="opacity-0"
            class="flex w-full items-center justify-center">
            <x-common.logo class="h-[34px] w-[148px] max-w-full object-contain object-center" />
        </div>
    </div>

    <nav aria-label="Sidebar links" class="flex-1 space-y-0.5 px-2 py-4">
        @foreach($navigation ?? config('admin-nav.items', []) as $item)
        @if(isset($item['children']))
        <x-layouts.admin.sidebar-group :item="$item" />
        @else
        <x-layouts.admin.sidebar-link :item="$item" />
        @endif
        @endforeach
    </nav>

    <div class="flex-shrink-0 border-t border-sidebar-border p-2">
        <button
            type="button"
            @click="$store.sidebar.toggle()"
            class="{{ $toggle }}"
            :title="$store.sidebar.collapsed ? 'Expand sidebar' : 'Collapse sidebar'">
            <svg
                x-cloak
                class="h-5 w-5 transition-transform duration-300"
                :class="$store.sidebar.collapsed ? 'rotate-180' : ''"
                fill="none" stroke="currentColor" viewBox="0 0 24 24"
                aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
            </svg>
        </button>
    </div>
</aside>

<div
    x-show="$store.sidebar.mobileOpen"
    x-transition:enter="transition-opacity ease-linear duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition-opacity ease-linear duration-300"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    @click="$store.sidebar.closeMobile()"
    class="fixed inset-0 z-30 bg-black/60 lg:hidden"
    x-cloak
    aria-hidden="true"></div>

<aside
    x-show="$store.sidebar.mobileOpen"
    x-transition:enter="transform transition duration-300 ease-in-out"
    x-transition:enter-start="-translate-x-full"
    x-transition:enter-end="translate-x-0"
    x-transition:leave="transform transition duration-300 ease-in-out"
    x-transition:leave-start="translate-x-0"
    x-transition:leave-end="-translate-x-full"
    class="{{ $mobile }}"
    x-cloak
    aria-label="Mobile navigation">
    <div class="{{ $brand }} justify-between">
        <img
            src="{{ asset('logo/Chapter247LOGO.png') }}"
            alt="Chapter247 Infotech"
            class="{{ $logo }} h-[34px] max-w-[60%] object-contain object-left w-[140px]" />
        <button
            type="button"
            @click="$store.sidebar.closeMobile()"
            class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground dark:hover:bg-white/10"
            aria-label="Close menu">
            <x-heroicon-o-x-mark class="h-5 w-5" />
        </button>
    </div>

    <nav aria-label="Mobile sidebar links" class="flex-1 space-y-0.5 px-2 py-4">
        @foreach($navigation ?? config('admin-nav.items', []) as $item)
        @if(isset($item['children']))
        <x-layouts.admin.sidebar-group :item="$item" />
        @else
        <x-layouts.admin.sidebar-link :item="$item" />
        @endif
        @endforeach
    </nav>
</aside>