Sort by

<div x-data="{open:false}" class="sort-by relative w-fit whitespace-nowrap" @click.away="open = false">

    <button @click="open = !open" class="group flex items-center font-semibold gap-2.5">

        <span>Trier <span>par</span></span>

        <?= icon('chevron-down', 'w-3.5 text-primary-accent group-hover:text-secondary'); ?>

    </button>

    <ul x-ref="content" class="sort-by-options hidden w-fit" :class="{'hidden': !open}" >

        <li @click="open = false">Prix croissant</li>

        <li @click="open = false">Prix décroissant</li>

    </ul>

</div>