<div class="container-fluid sidebar col-xs-12 col-sm-12 col-md-3 col-lg-3">
  <nav class="smalltopics no-background navbar navbar-expand-lg navbar-light bg-white p-0 fixed">
    <label class="side-toggler" for="menu-toggle">
      <a class="btn btn-lg outline-primary text-primary navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarSupportedTopicsContent" aria-controls="navbarSupportedTopicsContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas"></i>
      </a>
    </label>
    <input type="checkbox" id="menu-toggle"/>

    <div class="collapse navbar-collapse burger-menu" id="navbarSupportedTopicsContent">
      <ul class="nav nav-pills flex-column">
        {% for child in this.parent.children %}
          <li{% if this.is_child_of(child.path) %} class="toc-entry toc-h2 active nav-item" {% else %} class="toc-entry toc-h2 nav-item" {% endif %}>
            <a role="button" {% if this.is_child_of(child.path) %} class="nav-link active" {% else %} class="nav-link" {% endif %}
              href="{{ child.path|url(alt=this.alt) }}">{{ _(child.title) }}</a>
          </li>
      	{% endfor %}
    </ul>
    </div>
    <hr class="mb-0" />
  </nav>

  <nav class="d-none d-sm-block bg-white border-right sidetopics" id="sidenav-topics" style="top:172px;">
    <ul class="nav nav-pills flex-column">
      {% for child in this.parent.children|sort(attribute='key') %}
        <li{% if this.is_child_of(child.path) %} class="toc-entry toc-h2 active nav-item" {% else %} class="toc-entry toc-h2 nav-item" {% endif %}>
          <a role="button" {% if this.is_child_of(child.path) %} class="nav-link active" {% else %} class="nav-link" {% endif %}
            href="{{ child.path|url(alt=this.alt) }}">{{ _(child.title) }}</a>
        </li>
    	{% endfor %}
    </ul>
  </nav>


</div>
