<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 === 'side-panel')?.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 === 'side-panel')?.open" @click.outside="$store.asideBlocs.closeAside('side-panel')">
<div class="font-medium h4 flex justify-between items-center mb-4">
<span>Side panel title</span>
<button type="button" @click="$store.asideBlocs.closeAside('side-panel')" 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>
<div class="overflow-auto flex-1">
Side panel content
</div>
<div class="">
<button type="button" class="w-full btn btn-dark btn-solid btn-size-lg">
Side panel button
</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 h4 flex justify-between items-center mb-4">
<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>
<div class="overflow-auto flex-1">
{% block content '' %}
{{ content }}
</div>
{% if sidePanelButton is defined and sidePanelButton.label %}
<div class="">
{% block panel_button %}
{% render "@template-button" with (sidePanelButton)|merge({mobile_size:'md',size:'lg',button_class:'w-full',color: colorType|default('dark'), button_attribute: buttonAttribute|default('')}) %}
{% endblock %}
</div>
{% endif %}
</div>
</div>
{
"title": "Side panel title",
"content": "Side panel content",
"sidePanelButton": {
"label": "Side panel button"
},
"mobilePanel": "full",
"showValue": "$store.asideBlocs.asides.find(aside => aside.name === 'side-panel')?.open",
"closeButtonAlpineClick": "$store.asideBlocs.closeAside('side-panel')"
}
No notes defined.