<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 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">
	{% set topicbag = 'topics' %}
	{% for id, item in bag(topicbag).items() %}
	<li{% if this.is_child_of(item.path) %} class="toc-entry toc-h2 active nav-item" {% else %} class="toc-entry toc-h2 nav-item"{% endif %}>
    {% if this.alt != "en" %}
    {% set p = '/' + this.alt + '/' + item.path %}
    {% else %}
    {% set p = '/' + item.path %}
    {% endif %}
    <a role="button" {% if this.is_child_of(item.path) %} class="side-nav active" {% else %} class="side-nav" {% endif %}  href="{{ p|url }}">{{ _(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 {{ bag('alternatives', this.alt, 'direction') }}" id="sidenav-topics">
          <h4 class="text-primary pl-4">{{ _('Topics') }}</h4>
    <ul class="nav nav-pills flex-column">
      {% set topicbag = 'topics' %}
      {% for id, item in bag(topicbag).items() %}
      <li{% if this.is_child_of(item.path) %} class="toc-entry toc-h2 active nav-item" {% else %} class="toc-entry toc-h2 nav-item" {% endif %}>
      {% if this.alt != "en" %}
      {% set p = '/' + this.alt + '/' + item.path %}
      {% else %}
      {% set p = '/' + item.path %}
      {% endif %}
        <a role="button" {% if this.is_child_of(item.path) %} class="nav-link active" {% else %} class="nav-link" {% endif %}  href="{{ p|url }}">{{ _(item.label) }}</a>
      </li>

      {% endfor %}
    </ul>


    <div class="card-body text-center border w-50 ml-4">
        <h4 class="text-primary">{{ _("Get in Touch") }}</h4>
        <i class="fas fa-comments h1 text-primary mx-auto"></i>
        <div class=" pt-2" style="text-align: center;">
          <p class="toc-entry toc-h2 nav-item mb-0" >{{ ("Chat with us live!") }}</p>
          <a href="https://webchat.oftc.net/?channels=tor" target="_blank" class="pt-1">{{ ("Join us on IRC") }}</a>
        </div>
    </div>

  </nav>



</div>
