{% block navigation %}
<nav class="white"
     role="navigation">
   <div class="nav-wrapper container">
      <a id="logo-container"
         href="{{ "index"|link }}"
         class="brand-logo">
         <img src="{{ assets_url }}/logo.svg "
              alt=""
              height="50"
              width="50" />
      </a>
      <a data-target="slide-out"
         class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
         {% for page in pages("index") if not page.hidden %}

         {% if pages(page.id) | length < 1 %}
         <li>
            <a class=""
               href="{{ page.url }}"
               tabindex="0">{{ page.title }}</a>
         </li>
         {% else %}
         <li>
            <a class="dropdown-trigger"
               data-target="dropdown_{{ page.id }}"
               tabindex="0">{{ page.title }}<i class="material-icons left">arrow_drop_down</i></a>
            <ul class="dropdown-content"
                id="dropdown_{{ page.id }}">
               {% for subpage in pages(page.id) %}
               <li>
                  <a class=""
                     href="{{ subpage.url }}"
                     tabindex="0">{{ subpage.title }}</a>
               </li>
               {% endfor %}
            </ul>
            {% endif %}
         </li>
         {% endfor %}
      </ul>
   </div>
</nav>

<ul id="slide-out"
    class="sidenav sidenav-fixed collapsible">
   {% for page in pages("index") if not page.hidden %}
   {% if pages(page.id) | length < 1 %}
   <li>
      <a class="waves-effect"
         href="{{ page.url }}"
         tabindex="0">{{ page.title }}</a>
      {% else %}
   <li>
      <a class="collapsible-header waves-effect"
         data-target="collapse_{{page.id}}">{{ page.title }}<i class="material-icons right">arrow_drop_down</i></a>
      <div class="collapsible-body"
           id="collapse_{{page.id}}">
         <ul>
            {% for subpage in pages(page.id) %}
            <li>
               <a class="waves-effect"
                  href="{{ subpage.url }}">{{ subpage.title }}</a>
            </li>
            {% endfor %}
         </ul>
   </li>
   {% endif %}

   </li>
   {% endfor %}
</ul>
{% endblock %}