<header class="navbar navbar-static-top bs-docs-sidebar" id="top" role="banner">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-sidenav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="{{ site.baseurl }}" class="navbar-brand">
        Bootstrap
      </a>
    </div>
    <nav class="collapse navbar-collapse bs-sidenav-collapse" role="navigation">
      {% for group in site.data.nav %}
        {% assign link = group.pages | first %}
        {% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
        {% assign active = nil %}

        {% if page.url contains slug %}
          {% assign active = 'active' %}
        {% endif %}

        <div class="bs-docs-toc-item {{ active }}">
          <a class="bs-docs-toc-link" href="{{ site.baseurl }}{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-'  }}">
            {{ group.title }}
          </a>

          <ul class="nav bs-docs-sidenav">
            {% for doc in group.pages %}
              {% assign slug = doc.title | downcase | replace: ' ', '-' %}
              {% assign active = nil %}

              {% if page.url contains slug %}
                {% assign active = 'active' %}
              {% endif %}

              <li class="{{ active }}">
                <a href="{{ site.baseurl }}{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' }}">
                  {{ doc.title }}
                </a>

                {% unless doc.sections == nil %}
                  <ul class="nav">
                    {% for section in doc.sections %}
                      <li>
                        <a href="{{ site.baseurl }}{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' }}#{{ section.title | downcase | replace: ' ', '-' }}">
                          {{ section.title }}
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                {% endunless %}
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endfor %}
    </nav>
  </div>
</header>
