{% removeemptylines %}
<ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
   {% assign current-page = page.menu | default: layout.menu | split: '.' %}

   {% for level-1 in site.data.menu %}
   {% assign icon = level-1[1].icon %}

   {% assign has-children = false %}
   {% if level-1[1].children or level-1[1].docs %}
      {% assign has-children = true %}
   {% endif %}

   <li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if has-children %} dropdown{% endif %}">
      <a class="nav-link{% if has-children %} dropdown-toggle{% endif %}" {% if has-children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
         aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% elsif level-1[1].toggle
         %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}" {% else
         %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
         <span class="nav-icon">
            {% include_cached ui/icon.html icon=icon  %}
         </span>
         <span class="nav-text">
            {{ level-1[1].title }}

            {% unless include.top %}
            {% if level-1[1].label %}
            <span class="badge bg-{{ level-1[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-1[1].label }}</span>
            {% endif %}
            {% endunless %}
         </span>
      </a>

      {% if has-children %}
      <div class="dropdown-menu">
         {% if level-1[1].docs %}
         {% for d in site.data.docs %}
         {% assign doc = site.docs | where: "slug", d.page | first %}
         {% if doc %}
         <a class="dropdown-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
            <span class="nav-text">
               {{ doc.title }}

               {% if doc.new %}
               <span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
               {% endif %}
            </span>
         </a>
         {% endif %}
         {% endfor %}
         {% endif %}

         {% for level-2 in level-1[1].children %}
         <a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
            <span class="nav-text">
               {{ level-2[1].title }}
               {% if level-2[1].label %}
                  <span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
               {% endif %}
            </span>
         </a>
         {% endfor %}
      </div>
      {% endif %}
   </li>
   {% endfor %}
</ul>
{% endremoveemptylines %}