{% if categories %}
<nav id="menu" class="navbar">
  <div class="container">
    <!-- <div class="row"> -->
      <div class="navbar-header visible-xs visible-sm">
        <button type="button" class="btn btn-primary mobile-search"><i class="fa fa-search"></i></button>
        <button type="button" class="btn btn-navbar mobile-nav-icon"><i class="fa fa-bars"></i></button>
      </div>
      <div class="side-menu">
        <div class="side-inner">
          <div id="search" class="input-group hidden-lg hidden-md">
            <input type="text" name="search" value="{{ search }}" placeholder="{{ text_search }}" class="form-control" />
            <button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button>
          </div>
          <div class="side-title hidden-lg hidden-md">{{ text_category }}</div>
          <ul class="nav navbar-nav">
            {% for category in categories %}
            {% if category.children %}
            <li class="dropdown">
              <span class="toggle-button"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
              <a href="{{ category.href }}">{{ category.name }}</a>
              <ul class="dropdown-menu">
                {% for child in category.children %}
                <li><a href="{{ child.href }}">{{ child.name }}</a></li>
                {% endfor %}
              </ul>
            </li>
            {% else %}
            <li><a href="{{ category.href }}">{{ category.name }}</a></li>
            {% endif %}
            {% endfor %}
          </ul>
        </div>
      </div>
    <!-- </div> -->
  </div>
</nav>
{% endif %}

