<header class="navbar navbar-static-top bs-docs-sidebar" id="top" role="banner">
  <a href="{{ site.baseurl }}" class="navbar-brand">
    Bootstrap
  </a>
  {% 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 %}
</header>
