vartheme_bs5-2.0.x-dev/src/components/organisms/offcanvas/offcanvas.twig

{% include "@atoms/button/button.twig" with {
  attributes: main_button_attributes,
  content: button_label,
  color: 'primary',
  main_button_attributes.setAttribute('type', 'button'),
  main_button_attributes.setAttribute('data-bs-toggle', 'offcanvas'),
  main_button_attributes.setAttribute('data-bs-target', '#offcanvasExample'),
  main_button_attributes.setAttribute('aria-controls', 'offcanvasExample'),
  utility_classes: []
} %}

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">{{ offcanvas_title }}</h5>
    {% include "@atoms/closeButton/closeButton.twig" with {
      attributes: close_button_attributes,
      close_button_attributes.setAttribute('data-bs-dismiss', 'offcanvas'),
    } %}
  </div>
  <div class="offcanvas-body">
    <div>{{ offcanvas_body }}</div>
    {% if dropdown %}
      <div class="dropdown mt-3">
        {% include "@atoms/button/button.twig" with {
          attributes: dropdown_button_attributes,
          color: 'secondary',
          content: 'Dropdown button',
          dropdown_button_attributes.setAttribute('data-bs-toggle', 'dropdown'),
          utility_classes: ['dropdown-toggle']
        } %}
        {% include "@molecules/dropdown/dropdown-menu.twig" with {
          items: dropdown.items
        } %}
      </div>
    {% endif %}
  </div>
</div>