<div x-data class="fixed right-0 z-40 inset-y-0 lg:inset-y-0 max-w-full">
<div x-cloak x-transition.opacity x-show="$store.asideBlocs.asides.find(aside => aside.name === 'filter')?.open" class="fixed inset-0 w-full h-full bg-black/40"></div>
<div x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="relative bg-white overflow-hidden h-full lg:h-full w-screen md:w-[372px] 2xl:w-[368px] 3xl:w-[508px] flex flex-col lg:rounded-t-none p-8" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'filter')?.open" @click.outside="$store.asideBlocs.closeAside('filter')">
<div class="font-medium h3 flex justify-between items-center mb-6">
<span>Filtrer</span>
<button type="button" @click="$store.asideBlocs.closeAside('filter')" aria-label="Label text" class=" btn btn-neutral btn-outline btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
<h5 class="text-body-base text-brand-800 font-semibold">Préoccupations</h5>
<div class="overflow-auto pt-2 pb-4">
<ul class="flex flex-col gap-2">
<li class="flex items-center gap-3 px-3 py-2 ">
<input type="checkbox" id="filter-1" class="w-5 h-5 border-2 border-black">
<label for="filter-1" class="text-body-base">
Boutons et imperfections (2)
</label>
</li>
<li class="flex items-center gap-3 px-3 py-2 bg-neutral-50">
<input type="checkbox" id="filter-2" class="w-5 h-5 border-2 border-black" checked>
<label for="filter-2" class="text-body-base">
Hypersensibilité & rougeurs (1)
</label>
</li>
<li class="flex items-center gap-3 px-3 py-2 ">
<input type="checkbox" id="filter-3" class="w-5 h-5 border-2 border-black">
<label for="filter-3" class="text-body-base">
Perte d’éclat & tâches (6)
</label>
</li>
<li class="flex items-center gap-3 px-3 py-2 ">
<input type="checkbox" id="filter-4" class="w-5 h-5 border-2 border-black">
<label for="filter-4" class="text-body-base">
Sécheresse & stress urbain (4)
</label>
</li>
<li class="flex items-center gap-3 px-3 py-2 ">
<input type="checkbox" id="filter-5" class="w-5 h-5 border-2 border-black">
<label for="filter-5" class="text-body-base">
Signes de l’âge (3)
</label>
</li>
</ul>
</div>
<div class="">
<button type="button" class=" btn btn-dark btn-outline btn-size-lg">
Appliquer les filtres
</button>
</div>
</div>
</div>
<div x-data class="fixed right-0 z-40 {% if mobilePanel == 'full' %}inset-y-0{% else %}bottom-0{% endif %} lg:inset-y-0 max-w-full">
<div x-cloak x-transition.opacity x-show="{{ showValue }}" class="fixed inset-0 w-full h-full bg-black/40"></div>
<div x-cloak
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full"
class="relative bg-white overflow-hidden {% if mobilePanel == 'full' %}h-full{% else %}rounded-t-md{% endif %} lg:h-full w-screen md:w-[372px] 2xl:w-[368px] 3xl:w-[508px] flex flex-col lg:rounded-t-none p-8"
x-show="{{ showValue }}" @click.outside="{{ closeButtonAlpineClick }}">
<div class="font-medium h3 flex justify-between items-center mb-6">
<span>{{ title }}</span>
{% render "@template-button" with {
color: "neutral",
type: 'outline',
size: "sm",
icon_type: 'only-icon',
icon: {name:'heroicons--x-mark-outline'},
button_attribute: '@click="'~ closeButtonAlpineClick ~ '"'
} %}
</div>
<h5 class="text-body-base text-brand-800 font-semibold">Préoccupations</h5>
<div class="overflow-auto pt-2 pb-4">
<ul class="flex flex-col gap-2">
{% for content in content %}
<li class="flex items-center gap-3 px-3 py-2 {{ content.checked ? 'bg-neutral-50' : '' }}">
<input type="checkbox"
id="filter-{{ loop.index }}"
class="w-5 h-5 border-2 border-black"
{% if content.checked %}checked{% endif %}>
<label for="filter-{{ loop.index }}" class="text-body-base">
{{ content.label }} ({{ content.count }})
</label>
</li>
{% endfor %}
</ul>
</div>
{% if sidePanelButton is defined and sidePanelButton.label %}
<div class="">
{% block panel_button %}
{% render "@template-button" with (sidePanelButton)|merge({mobile_size:'md',size:'lg',type:'outline' ,button_class:'',color: colorType|default('dark'), button_attribute: buttonAttribute|default('')}) %}
{% endblock %}
</div>
{% endif %}
</div>
</div>
{
"title": "Filtrer",
"content": [
{
"label": "Boutons et imperfections",
"count": 2,
"checked": false
},
{
"label": "Hypersensibilité & rougeurs",
"count": 1,
"checked": true
},
{
"label": "Perte d’éclat & tâches",
"count": 6,
"checked": false
},
{
"label": "Sécheresse & stress urbain",
"count": 4,
"checked": false
},
{
"label": "Signes de l’âge",
"count": 3,
"checked": false
}
],
"sidePanelButton": {
"label": "Appliquer les filtres"
},
"mobilePanel": "full",
"showValue": "$store.asideBlocs.asides.find(aside => aside.name === 'filter')?.open",
"closeButtonAlpineClick": "$store.asideBlocs.closeAside('filter')"
}
No notes defined.