Drawer

{% set classes = ['flex', 'fixed', 'inset-0'] %}
{#
  Prop: openEvent
  The event name to trigger to open drawer.
#}
{% if openEvent is not defined %}
  {% set openEvent = 'open-drawer' %}
{% endif %}
{#
  Prop: closeEvent
  The event name to trigger to open drawer.
#}
{% if closeEvent is not defined %}
  {% set closeEvent = 'close-drawer' %}
{% endif %}
{#
  Prop: direction
  The direction the drawer should open from left/right.
#}
{% if fullWidth is not defined %}
  {% set fullWidth = 'true' %}
{% endif %}
{#
Prop: teleport
Move the DOM element to the body.
#}
{% if teleport is defined and teleport == 'true' %}
  <template x-teleport="body">
{% endif %}
  <div
    x-data="{ open: false }"
    x-dialog
    x-model="open"
    style="display: none"
    :initial-focus="$refs.focus"
    class="azalea-drawer azalea-z-max fixed inset-0 overflow-hidden"
    @{{ openEvent }}.window="open = true"
    @{{ closeEvent }}.window="open = false"
    {% if side == 'left' %}
      @swiped-left="open = false"
    {% else %}
      @swiped-right="open = false"
    {% endif %}
  >
    <div x-dialog:overlay class="azalea-overlay fixed w-full h-full pointer-events-none bg-black/50 backdrop-blur-sm"></div>
    <div class="fixed inset-y-0 right-0 max-w-lg w-full">
      <div
        x-dialog:panel
        x-transition:enter="transition ease-out duration-300"
        {% if side == 'left' %}
          x-transition:enter-start="-translate-x-full"
        {% else %}
          x-transition:enter-start="translate-x-full"
        {% endif %}
        x-transition:enter-end="translate-x-0"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="translate-x-0"
        {% if side == 'left' %}
          x-transition:leave-end="-translate-x-full"
        {% else %}
          x-transition:leave-end="translate-x-full"
        {% endif %}
        class="h-full w-full"
      >
        <div class="{{ classes|join(' ') }}">
          <div class="{% if fullWidth == 'true' %}w-screen{% else %}w-4/5{% endif %}">
            <div class="azalea-scrollbar-hidden flex flex-col w-full h-full py-2 bg-white shadow-xl overflow-y-auto">
              <div class="flex justify-end">
                <button
                  class="flex items-center p-1 text-black cursor-pointer no-underline outline-none"
                  @click="$dialog.close()"
                >
                  <span class="sr-only">Close</span>
                  {% include "@components/icon/icon.twig" with { icon: 'x', size: 'large' } %}
                </button>
              </div>
              <div x-ref="focus" class="relative mt-6 flex-1">
                {{ block('body') }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% if teleport %}
  </template>
{% endif %}