<header class="md-header">
  <nav class="md-header-nav md-grid">
    <div class="md-flex">
      <div class="md-flex__cell md-flex__cell--shrink">
        <a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="md-icon md-header-nav__icon md-header-nav__icon--home">
          layers
        </a>
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        <label class="md-icon md-header-nav__icon md-header-nav__icon--menu" for="drawer">
          menu
        </label>
      </div>
      <div class="md-flex__cell md-flex__cell--stretch">
        <span class="md-flex__ellipsis md-header-nav__title">
          {% block site_name %}
            {% if page %}
              {% for parent in page.ancestors %}
                <span class="md-header-nav__parent">
                  {{ parent.title }}
                </span>
              {% endfor %}
            {% endif %}
            {{ page.title | default(config.site_name, true) }}
          {% endblock %}
        </span>
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        {% block search_box %}
          <label class="md-icon md-header-nav__icon md-header-nav__icon--search" for="search">
            search
          </label>
          {% include "partials/search.html" %}
        {% endblock %}
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        {% block repo %}
          {% if config.repo_url %}
            <div class="md-header-nav__source">
              {% include "partials/source.html" %}
            </div>
          {% endif %}
        {% endblock %}
      </div>
    </div>
  </nav>
</header>