<header class=“header” id=“menutoggle”>

<a href="#content" class="show-on-focus skip">Zum Inhalt springen</a>
<div class="header__visible">
  <div class="header__toggle">
    <a href="#menutoggle" class="toggle burger" title="Menü ausklappen">
      <svg viewBox="0 0 100 100" width="60px" height="40px" class="toggle__icon">
        <title>Menü öffnen</title>
        <rect x="0" y="38" width="100" height="5" class="toggle__r" />
        <rect x="0" y="63" width="100" height="5" class="toggle__l" />
      </svg>
    </a>
    <a href="#content" class="toggle cross" title="Menü einklappen">
      <svg viewBox="0 0 100 100" width="60px" height="40px" class="toggle__icon">
        <title>Menü schließen</title>
        <rect x="0" y="38" width="100" height="5" class="toggle__r" />
        <rect x="0" y="63" width="100" height="5" class="toggle__l" />
      </svg>
    </a>
  </div>
  <div class="header__title">
    <h2><a href="/">{{ site.title }}</a></h2>
  </div>
</div>
<div  class="header__toggleble">
  <nav class="header__nav" aria-label="Hauptnavigation">
    <h2 class="header__nav-title is-size-5">Inhalt</h2>
    <ol>
      {% assign sorted_pages = site.pages | sort:"chapter" %}
      {% for p in sorted_pages %}
      {% if p.layout == 'page' %}
      {% assign frags = p.path | split: "/" %}
      <li class="{% if frags[1] == 'index.md' %}toplevel{% else %}sublevel{% endif %}
                 {% if page.url == p.permalink %}active{% endif %}">
        <a href="{{ site.baseurl }}{{ p.permalink }}">{{ p.title }}</a>
      </li>
      {% endif %}
    {% endfor %}
    </ol>
  </nav>
  <p class="header__footer"><a href="{{ site.mainpage.url }}">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
         width="18px" height="18px" class="icon-back-to">
      <title>Arrow pointing left</title>
      <path d="M10 50 H 80" fill="transparent" stroke="#112233"
            stroke-width="7" stroke-linecap="square"/>
      <path d="M40 25 L 8 50 L 40 75"
            fill="transparent" stroke="#112233"
            stroke-width="7" stroke-linecap="round"/>
    </svg>
    {{ site.mainpage.label }}</a></p>
</div>

</header>