<flux:sidebar sticky stashable
    class="bg-zinc-50 dark:bg-zinc-900 border-r rtl:border-r-0 rtl:border-l border-zinc-200 dark:border-zinc-700">

    <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
    <flux:brand logo="{{ asset('assets/images/logo.png') }}" name="Yadi Parfum" class="px-2 dark:hidden" />
    <flux:brand logo="{{ asset('assets/images/dark-logo.png') }}" name="Yadi Parfum" class="px-2 hidden dark:flex" />

    <flux:navlist variant="outline">
        @foreach ($sidebar as $section)
            @php
                $items = collect($section['items'])->filter(function ($item) {
                    return !isset($item['can']) || auth()->user()?->can($item['can']);
                });
            @endphp

            @if ($items->isNotEmpty())
                @if ($section['heading'])
                    <div class="mt-3 mb-1">
                        <div class="text-zinc-500 dark:text-gray-300 text-sm/6">{{ $section['heading'] }}</div>
                        <div class="grid gap-2">
                            @foreach ($items as $item)
                                <flux:navlist.item icon="{{ $item['icon'] }}" href="{{ route($item['route']) }}"
                                    :current="request()->routeIs($item['match'])" wire:navigate.hover>
                                    {{ $item['label'] }}
                                </flux:navlist.item>
                            @endforeach
                        </div>
                    </div>
                @else
                    @foreach ($items as $item)
                        <flux:navlist.item icon="{{ $item['icon'] }}" href="{{ route($item['route']) }}"
                            :current="request()->routeIs($item['match'])" wire:navigate.hover>
                            {{ $item['label'] }}
                        </flux:navlist.item>
                    @endforeach
                @endif
            @endif
        @endforeach
    </flux:navlist>

</flux:sidebar>
