header.html

<!-- 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" %}
  
  
    {% for node in site.menu %}
    
      {% if node.folder %}
        <li class="no-padding">
          <ul class="collapsible collapsible-accordion">
            <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>
          </ul>
        </li>
      {% else if node.url %}
        <li 
          {% if page.url == node.url %}
          class="active"
          {% endif %}
        >
          <a href="{% unless node.external %}{{ site.baseurl }}{% endunless %}{{ node.url }}" {% if node.external %}target="_blank"{% endif %}>{{node.title}}</a>
        </li>
      {% endif %}
  {% endfor %}
</li>
</ul>