<!-- The page title -->
<nav class="top-nav">
  <div class="container">
    <div class="nav-wrapper">
      <a class="page-title">
        {% if page.title == "Home" %}{{ site.title }}{% else %}{{ page.title }}{% endif %}
      </a>
    </div>
  </div>
</nav>

<div class="container">
  <a href="#" data-activates="kwarc-nav" class="button-collapse top-nav full hide-on-large-only">
    <i class="material-icons">menu</i>
  </a>
</div>

<!-- The menu -->
<ul id="kwarc-nav" class="side-nav fixed">
  <li>
    <div class="userView">
      <a href="{{ site.baseurl }}/"><img src="{{ site.baseurl }}/public/kwarc_logo.svg" width="180px" height="180px"></a>
    </div>
  </li>
  
  {% assign url_parts = page.url | split: '/' %}
  {% assign base_url = url_parts | last %}
  {% assign base_folder = url_parts[1] %}
  {% assign sorted_pages = site.pages | sort:"menu_order" %}
  
  <li class="no-padding">
    <ul class="collapsible collapsible-accordion">
      {% for node in site.menu %}
        <li class="bold">
          <a class="collapsible-header {% if base_folder == node.folder %}active{% endif %}">{{ node.title }}</a>
          <div class="collapsible-body">
            <ul>
              {% for sub in sorted_pages %}
                
                {% assign sub_parts = sub.url | split: '/' %}
                {% assign sub_url = sub_parts | last %}
                {% assign sub_folder = sub_parts[1] %}
                
                {% if sub_folder == node.folder %}
                  {% if sub.hidden == false %}
                    <li {% if sub_url == base_url %}class="active"{% endif %}>
                      <a href="{{ sub.url }}">
                        {% if sub.menu_title %}
                          {{ sub.menu_title }}
                        {% else %}
                          {{ sub.title }}
                        {% endif %}
                      </a>
                    </li>
                  {% endif%}
                {% endif %}
              {% endfor %}
            </ul>
          </div>
        </li>
      {% endfor %}
    </ul>
  </li>
  
  <li {% if page.url == "/news/" %} class="active" {% endif %}><a href="{{ site.baseurl }}/news/">News</a></li>
  <li {% if page.url == "/contact/" %} class="active" {% endif %}><a href="{{ site.baseurl }}/contact/">Contact</a></li>
</ul>