{% macro loop(page) %}
    {% for p in page.children.visible %}
      {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
          <li id="menu-item-{{ loop.index }}" class="menu-item {% if p.children.visible.count > 0 %}menu-item-has-children has-dropdown{% endif %} menu-item-{{ loop.index }} not-click {{ current_page }}">
          <a href="{{ p.url }}">
              {% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
              {{ p.menu }}
          </a>
          {% if p.children.visible.count > 0 %}
              <ul class="sub-menu dropdown">
                  {{ _self.loop(p) }}
              </ul>
          {% endif %}
      </li>
    {% endfor %}
{% endmacro %}

<header id="masthead" class="site-header" role="banner">
   <div class="stick">
      <nav class="top-bar" data-topbar="" data-options="mobile_show_parent_link: true">
         <ul class="title-area">
            <li class="name"></li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
         </ul>
         <section class="top-bar-section">
            <ul id="menu-header" class="right">
              {% if theme_config.dropdown.enabled %}
                  {{ _self.loop(pages) }}
              {% else %}
                  {% for page in pages.children.visible %}
                    {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
                    <li id="menu-item-{{ loop.index }}" class="{{ current_page }}">
                        <a href="{{ page.url }}">
                            {% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
                            {{ page.menu }}
                        </a>
                    </li>
                  {% endfor %}
              {% endif %}
              {% for mitem in site.menu %}
                  <li>
                      <a href="{{ mitem.url }}">
                          {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
                          {{ mitem.text }}
                      </a>
                  </li>
              {% endfor %}
            </ul>
         </section>
      </nav>
      <hr>
   </div>
</header>