<nav id="sidenav" class="navbar navbar-default navbar-expand-md navbar-dark" role="navigation">
  <a class="navbar-brand d-block d-md-none d-xl-none" href="#"><i class="fa fa-home fa-fw"></i> Table of Contents</a>
  <button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#sidebar-navbar-collapse" aria-controls="sidebar-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="sidebar-navbar-collapse">
    <!-- Main navigation -->
    <ul class="nav navbar-nav flex-column">
    {%- for nav_item in nav %}
      {%- for nav_item in nav_item.children %}
      {%- if nav_item.children %}
      <li id="nav-item-{{ nav_item.title|lower|replace(' ','-') }}" class="toplevel nav-item{% if nav_item.active %} active{% endif %}" data-toggle="collapse" data-target="#{{ nav_item.title|lower|replace(' ','-') }}">
	<!--<i class="nav-item-icon"></i>-->
        <span class="section-title">{{ nav_item.title }}</span>
        <ul id="{{ nav_item.title|lower|replace(" ","-") }}" class="collapse">
	  {%- for nav_item in nav_item.children %}
          {% include "nav-sub.html" %}
	  {%- endfor %}
        </ul>
      </li>
      {%- else %}
      <li id="nav-item-{{ nav_item.title|lower|replace(' ','-') }}" class="toplevel nav-item{% if nav_item.active %} active{% endif %}">
        <a class="section-title nav-link" href="{{ nav_item.url|url }}">{{ nav_item.title }}</a>
      </li>
      {%- endif %}
      {%- endfor %}
      {%- if nav|length>1 %}{% if loop.first %}<li class="divider"><hr></li>{% endif %}{% endif %}
    {%- endfor %}
    </ul>
  </div>
</nav>

