---
data:
  type: hash
locale:
  type: string
i18n:
  type: hash
---
<section class="position-relative">
  <header class="my-3">
    <h3>Toggler dropdown</h3>
  </header>

  {%- block 'sutty/toggler/toggler_label.html', id: 'dropdown' -%}
  <div class="btn btn-primary">Toggler</div>
  {%- endblock -%}

  {%- block 'sutty/toggler/toggler.html', id: 'dropdown', class: "position-absolute" -%}
  <div class="bg-white border border-primary p-3 rounded w-60 mb-3">
    <ul>
      <li>{{ i18n.lorem_ipsum.five_words }}</li>
      <li>{{ i18n.lorem_ipsum.ten_words }}</li>
      <li>{{ i18n.lorem_ipsum.twenty_words }}</li>
    </ul>
  </div>
  {%- endblock -%}

  <header class="my-3">
    <h3>Toggler modal</h3>
  </header>

  {%- block 'sutty/toggler/toggler_label.html', id: 'menu', class: 'p-3' -%}
  <div>Menu</div>
  {%- endblock -%}

  {%- block 'sutty/toggler/toggler.html', id: 'menu', class: 'position-absolute top-0 left-0 vh-100 bg-white border p-4' -%}
  {%- block 'sutty/toggler/toggler_label.html', id: "menu", class: "w-100" -%}
  <div class="d-flex justify-content-end">X</div>
  {%- endblock -%}

  <div class="p-3">
    <ul>
      <li>{{ i18n.lorem_ipsum.five_words }}</li>
      <li>{{ i18n.lorem_ipsum.ten_words }}</li>
      <li>{{ i18n.lorem_ipsum.twenty_words }}</li>
    </ul>
  </div>
  {%- endblock -%}
</section>