<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">
    <a class="text-primary bg-white font-weight-bold navbar-brand" href="#collapseTopicsNav">
	{{ _('Topics') }}
    </a>
    <label class="side-toggler" for="menu-toggle">
      <a class="btn btn-lg outline-primary text-primary navbar-toggler chevron" data-toggle="collapse" data-target="#navbarSupportedTopicsContent" aria-controls="navbarSupportedTopicsContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="oi oi-chevron-top chevron-up"></span>
        <span class="oi oi-chevron-bottom chevron-down"></span>
      </a>
    </label>
    <input type="checkbox" id="menu-toggle"/>

    <div class="collapse navbar-collapse burger-menu" id="navbarSupportedTopicsContent">
      <ul class="nav nav-pills flex-column">
	{% set topicbag = 'topics+en' %}
	{% for id, item in bag(topicbag).items() %}
    <li{% if this.is_child_of(item.path) %} class="nav-item" {% else %} class="toc-entry toc-h2 nav-item"{% endif %}>
      <a role="button" {% if this.is_child_of(item.path) %} class="side-nav active" {% else %} class="side-nav" {% endif %}
      {% if this.is_child_of(this.parent) %}
        href="../../{{ item.path }}">
      {% else %}
        href="{{ item.path }}">
      {% endif %}
      {{ _(item.label) }}</a>
    </li>
	{% endfor %}
    </ul>
    </div>
    <hr class="mb-0" />
  </nav>


  <nav class="d-none d-sm-block section-nav bg-white sidetopics sticky" id="sidenav-topics">
          <h4 class="text-primary pl-4">{{ _('Topics') }}</h4>
    <ul class="nav nav-pills flex-column">
      {% set topicbag = 'topics+en' %}
      {% for id, item in bag(topicbag).items() %}
        <li{% if this.is_child_of(item.path) %} class="nav-item" {% else %} class="toc-entry toc-h2 nav-item"{% endif %}>
          <a role="button" {% if this.is_child_of(item.path) %} class="side-nav active" {% else %} class="side-nav" {% endif %}
          {% if this.is_child_of(this.parent) %}
            href="../../{{ item.path }}">
          {% else %}
            href="{{ item.path }}">
          {% endif %}
          {{ _(item.label) }}</a>
      </li>

      {% endfor %}
    </ul>
  </nav>
</div>
