<nav class="navbar m-menu navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">{{ config.title }}</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        {% set top = get_section(path="_index.md") %}
        {%- for p in top.subsections -%}
          {%- set sub = get_section(path=p) -%}
          {%- set has_children = sub.subsections | length > 0 -%}
          {%- if has_children -%}
            {%- set sub_count = sub.subsections | length -%}
            {%- set col_width = 12 / sub_count -%}
            <li class="dropdown m-menu-fw{% if current_url and current_url is starting_with(sub.permalink) %} active{% endif %}">
              <a href="#" data-toggle="dropdown" class="dropdown-toggle">{{ sub.title }}
                <span><i class="fa fa-angle-down"></i></span></a>
              <ul class="dropdown-menu">
                {%- for cp in sub.subsections -%}
                  {%- set child = get_section(path=cp) -%}
                  <li class="m-menu-content">
                    <ul class="col-sm-{{ col_width | round }}">
                      <li class="dropdown-header">{{ child.title }}</li>
                      {%- for cpage in child.pages -%}
                        <li><a href="{{ cpage.permalink }}">{{ cpage.title }}</a></li>
                      {%- endfor -%}
                    </ul>
                  </li>
                {%- endfor -%}
              </ul>
            </li>
          {%- else -%}
            <li class="{% if current_url and current_url is starting_with(sub.permalink) %}active{% endif %}">
              <a href="{{ sub.permalink }}">{{ sub.title }}</a>
            </li>
          {%- endif -%}
        {%- endfor -%}
      </ul>
    </div>
  </div>
</nav>
