{% set set_colors = {
    blue: 'bg-Blue',
    orange: 'bg-Pink',
    gray: 'bg-Gray' 
  } %}
  
  <section class="megaMenu" data-n-3583>
    <nav class="navbar navbarCustom navbar-expand-xl py-0">
      <div class="container px-0">
        {% if (megaMenu|length) > 0 %}
          <div class="collapse navbar-collapse ms-auto" id="navbarNavDropdown">
            <ul class="navbar-nav ms-auto mt-0">
              {% for item in megaMenu %} 
                {% if item.type.handle  == 'searchBar' %}
                  <li class="bg-Gray d-flex align-items-center justify-content-cente p-relative">
                      <div class="p-relative px-5">
                        {{ sprig('quarks/_blockSearch',{id:'resultsSearch'}) }}
                      </div>
                  </li>
                {% else %} 
                  {% set classLink = set_colors['' ~ item.type ~ ''] ?? null %}
                <li class="nav-item {{ classLink ?? 'px-2' }}">
                  <a {{ item.itemLink.getLinkAttributes() }}
                    class="nav-link py-3 {{ classLink ? 'px-md-5' : 'px-md-2' }}">
                    {% if not item.fieldSwitch %}
                      {{ item.itemLink.getCustomText()|upper }} 
                    {% else %}
                      {% set icon = item.image[0] ?? null %}
                      {% if icon %}
                        <img src="{{ icon.url }}"
                          alt="{{ icon.title }}"
                          width="95px"
                          height="40px"
                          class="img-fluid" />
                      {% endif %}
                    {% endif %}
                  </a>
                </li>
                {% endif %}
              {% endfor %}
            </ul>
          </div>
        {% endif %}
      </div>
    </nav>
  </section>