{% macro submenu(nav, second) -%}
    {% for file, item in nav -%}
        {% if item.label %}
          <li class="label">{{item.name}}</li>
        {% else %}
          <li{{ ' class="open"' | safe if isActiveMenuItem(file, item, filename) and not second }}{{ ' class="active"' | safe if isActiveMenuItem(file, item, filename) and second }}>
              <a href="{{file | safe}}" class="{{ 'yay-sub-toggle' if item.sub }} waves-effect waves-blue"> {% if item.icon %}<i class="{{item.icon}}"></i>{% endif %} {{item.name | safe}} {% if item.sub %}<span class="yay-collapse-icon mdi-navigation-expand-more"></span>{% endif %} {% if item.new %}<span class="badge new">new</span>{% endif %} </a>
              {% if item.sub -%}
                  <ul>
                      {{ submenu(item.sub, true) }}
                  </ul>
              {%- endif %}
          </li>
        {% endif %}
    {%- endfor %}
{%- endmacro %}

<!--
  Yay Sidebar
  Options [you can use all of theme classnames]:
    .yay-hide-to-small         - no hide menu, just set it small with big icons
    .yay-static                - stop using fixed sidebar (will scroll with content)
    .yay-gestures              - to show and hide menu using gesture swipes
    .yay-light                 - light color scheme
    .yay-hide-on-content-click - hide menu on content click

  Effects [you can use one of these classnames]:
    .yay-overlay  - overlay content
    .yay-push     - push content to right
    .yay-shrink   - shrink content width
-->
<aside class="yaybar {{sidebar_classes}}">
  
  <div class="top"><div>
    <!-- Sidebar toggle -->
    <a href="#" class="yay-toggle">
      <div class="burg1"></div>
      <div class="burg2"></div>
      <div class="burg3"></div>
    </a>
    <!-- Sidebar toggle -->

    <!-- Logo -->
    <a href="#!" class="brand-logo">
      <img src="assets/_con/images/logo-white.png" alt="Con">
    </a>
    <!-- /Logo -->
  </div></div>

  <div class="nano">
    <div class="nano-content">

      <ul>
        <li class="yay-user-info">
          <a href="page-profile.html">
            <img src="assets/_con/images/user.jpg" alt="John Doe" class="circle">
            <h3 class="yay-user-info-name">John Doe</h3>
            <div class="yay-user-location">
              <i class="fa fa-map-marker"></i> Las Vegas, NV
            </div>
          </a>
        </li>
        {{ submenu(navigation) }}

        <li class="label">Stats</li>
        <li class="content">
          <span><i class="fa fa-spinner"></i> Server Load</span>
          <div class="progress small light-green lighten-4">
            <div class="light-green accent-5" style="width: 37%"></div>
          </div>

          <span><i class="fa fa-thumbs-o-up"></i> User Satisfaction</span>
          <div class="progress small">
            <div style="width: 91%"></div>
          </div>
        </li>
      </ul>

    </div>
  </div>
</aside>
<!-- /Yay Sidebar -->