{{--
    The theme's side menu, fed from data.

    `groups` is the Navigation::groups() shape: each group's items are
    ['label', 'route', 'icon', 'active'?, 'can'?]. Groups are separated by the
    theme's divider rather than headed by a label, as in botique's panel; a
    group every item of which is gated away renders nothing, so two dividers
    never stack.
--}}
@props(['groups' => []])

@php
    $groups = collect($groups)
        ->map(fn ($group) => collect($group['items'])->filter(fn ($item) => ! isset($item['can']) || auth()->user()?->can($item['can'])))
        ->filter(fn ($items) => $items->isNotEmpty())
        ->values();
@endphp

<nav class="side-nav h-screen flex flex-col">
    <ul class="overflow-y-scroll overflow-x-hidden flex-1 py-2 no-scrollbar">
        @foreach ($groups as $items)
            @if (! $loop->first)
                <li class="side-nav__devider my-6"></li>
            @endif

            @foreach ($items as $item)
                <li>
                    <a href="{{ route($item['route']) }}" wire:navigate
                        class="side-menu transition-all {{ request()->routeIs($item['active'] ?? $item['route']) ? 'side-menu--active' : '' }}">
                        <div class="side-menu__icon">
                            <x-ui.icon :name="$item['icon'] ?? 'panels'" />
                        </div>
                        <div class="side-menu__title">{{ $item['label'] }}</div>
                    </a>
                </li>
            @endforeach
        @endforeach
    </ul>
</nav>