← back to Dw Theme Boost Fix

snippets/mobile-dropdown.liquid

110 lines

<ul class="navigation-submenu navigation-submenu-tier2">
  {% for link in link.links %}
    {% assign first_tier_link = link %}
    {% comment %}Inject is-dropdown-or-meganav begin{% endcomment %}
    {% comment %}
      A helper snippet for detecting if a link has a mega nav
      or dropdown associated with it.
    
      @param first_tier_link
    
      @param uses_blocks
    {% endcomment %}
    
    {% assign is_dropdown = false %}
    {% assign is_meganav = true %}
    
    {% if first_tier_link.links == blank %}
      {% assign is_meganav = false %}
    {% else %}
      {% assign is_dropdown = true %}
    {% endif %}
    
    {% for second_tier_link in first_tier_link.links %}
      {% if second_tier_link.links == blank %}
        {% assign is_meganav = false %}
      {% else %}
        {% assign is_dropdown = true %}
      {% endif %}
    {% endfor %}
    
    {% if is_meganav %}
      {% assign is_dropdown = false %}
    {% endif %}
    
    {% if uses_blocks %}
      {% assign found_mega_item_handle = false %}
      {% if section != blank and section.blocks != blank %}
        {% for block in section.blocks %}
          {% if block.type == 'mega_menu' %}
            {% assign menu_item_handle = block.settings.menu_item | handle %}
            {% if first_tier_link.handle == menu_item_handle %}
              {% assign found_mega_item_handle = true %}
            {% endif %}
          {% endif %}
        {% endfor %}
      {% endif %}
    
      {% if found_mega_item_handle %}
        {% if is_dropdown %}
          {% assign is_meganav = true %}
          {% assign is_dropdown = false %}
        {% endif %}
      {% elsif found_mega_item_handle == false %}
        {% if is_meganav %}
          {% assign is_meganav = false %}
          {% assign is_dropdown = true %}
        {% endif %}
      {% else %}
        {% if is_meganav %}
          {% assign is_meganav = false %}
          {% assign is_dropdown = true %}
        {% endif %}
      {% endif %}
    {% endif %}
    {% comment %}Inject is-dropdown-or-meganav end{% endcomment %}


    <li class="{% if is_dropdown %}has-dropdown open-{{ direction }}{% endif %}">
      <a
        id="mobile-dropdown-navigation-{{ link.handle }}"
        class="navigation-menu-link"
        href="{{ link.url }}"
        {% if is_dropdown %}aria-haspopup{% endif %}
      >
        {{ link.title }}
        {% if is_dropdown %}
          <span
            class="navigation-submenu-toggle"
            tabIndex="0"
            role="button"
            aria-controls="navigation-{{ link.handle }}"
            aria-expanded="false"
            aria-label="{{ 'general.accessibility.toggle' | t }}"
            data-subnav-toggle
          >
            {%
              render 'icons',
              id: 'chevron-right',
            %}
          </span>
        {% endif %}
      </a>

      {% if is_dropdown %}
        <ul class="navigation-submenu navigation-submenu-tier3">
          {% for link in link.links %}
            <li>
              <a
                class="navigation-menu-link"
                href="{{ link.url }}"
              >
                {{ link.title }}
              </a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>