{{-- v4.11.0 §A — LA BARRE LATÉRALE DE LA VUE CLIENT (bureau, ≥ 1024 px).

     Ce qu'elle remplace : `flex flex-wrap gap-1 lg:flex-col`, huit liens qui s'enroulaient en
     pastilles dès qu'on descendait sous 1024 px, sans menu et sans hiérarchie. Ici : une colonne
     d'items icône + libellé, l'item courant marqué au filet d'accent de l'ESPACE — jamais une
     couleur écrite en dur.

     ⚠️ Elle est masquée sous `lg` : c'est la barre du bas qui prend le relais
     ({@see barre-basse}). Les deux lisent la MÊME liste de modules actifs, dans le MÊME ordre —
     celui que l'exploitant a choisi. Rien n'est codé en dur ici : ni un libellé, ni un module. --}}
@props(['modules', 'courant', 'lien'])

<nav class="hidden lg:block" aria-label="Modules de l'espace">
    <div class="rounded-xl border border-gray-200 bg-white p-2 shadow-sm dark:border-white/10 dark:bg-gray-900">
        <ul class="flex flex-col gap-0.5">
            @foreach ($modules as $entree)
                @php $actif = $entree['cle'] === $courant; @endphp
                <li>
                    <a href="{{ $lien($entree['cle']) }}"
                       @if ($actif) aria-current="page" @endif
                       @class([
                           'flex min-h-10 items-center gap-2.5 rounded-lg px-3 py-2 text-sm outline-offset-2 transition-colors',
                           'ec-accent-doux ec-accent-filet font-semibold text-gray-900 dark:text-white' => $actif,
                           'font-medium text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5' => ! $actif,
                       ])>
                        @svg($entree['module']->icone(), 'h-4 w-4 flex-none opacity-80')
                        <span class="min-w-0 truncate">{{ $entree['libelle'] }}</span>
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
</nav>