{% set topNav = navegation.groupsOfSubmenuLinks.all() ?? [] %}
{% set set_colors = {
  blue: 'bg-Blue',
  orange: 'bg-Pink',
  gray: 'bg-Gray'
} %}
<aside class="sideBar aside-blue" id="sideBar">
  <div class="sideBar__header pt-5 px-2">
    {% set logo = logos.twoImages.one %}
    {% if logo is not empty %}
    <a href="/">
      <img src="{{logo.getUrl()}}" alt="logo unops" width="160" height="auto">
    </a>
    {% endif %}
    <button aria-label="Abrir menu" class="btn_close" data-state="true"  onclick="eventNavbar(event, document.querySelector('.navbar-toggler.header_openmenu'))"></button>
  </div>
  <section class="sideBar__body">
    <div class="container p-0">
      {% if megaMenuLength > 0 %}
        <ul class="navbar-nav ms-auto mt-5">
          {% for el in topNav %}
          <li class="navbarCustom__links--link">
            {% if  el.links is empty %}
              <a class="sideBarlink first" {{el.groupLink.getLinkAttributes()}}>{{el.groupLink.customText}} </a>
            {% else %}
                <div class="sideBarlink__dropdowns">
                    <button class="sideBarlink sideBarlink_collapse p-3 px-md-5" data-bs-toggle="collapse" href="#collapse-{{el.id}}" role="button" aria-expanded="false" aria-controls="collapse-{{el.id}}">
                    </button>
                    <a class="sideBarlink w-100" {{el.groupLink.getLinkAttributes()}}>{{el.groupLink.customText}} </a>
                </div>
                {% if el.links is not empty %}
                <div class="collapse" id="collapse-{{el.id}}">
                  <ul class="p-0 text-end">
                    {% for subitem in el.links.all() %}
                    <li class="sideBarlink__btn p-3 px-3">
                      <a class="w-100" {% if subitem.scroll is same as(true) %} href="{{el.groupLink.getUrl() ~ subitem.itemLink.getUrl()}}"  {% else %}{{subitem.itemLink.getLinkAttributes()}} {% endif %}>{{subitem.itemLink.customText}}</a>
                    </li>
                    {% endfor %}
                  </ul>
                </div>
                {% endif %}
            {% endif %}
          </li>
          {% endfor %}
          {% for item in megaMenu %}
            {% if  item.type.handle == 'searchBar' %}
                <li class="sideBarlink bg-Gray py-4 d-flex align-items-center justify-content-cente p-relative">
                    <div class="w-100 p-relative px-md-5">
                      {{ sprig('quarks/_blockSearch',{id:'mobileSearch'}) }}
                    </div>
                </li>
            {% else %}
              <li class="itemContent {{item.type}} p-3">
                <a {{ item.itemLink.getLinkAttributes() }}>
                  <span>{{ item.itemLink.getCustomText()|upper }}</span>
                </a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  </section>
</aside>