<header class="site-header">

    <!-- Logo and title -->
	<div class="branding">
        {% if site.avatar %}
		<a href="{{ '/' | relative_url }}">
			<img alt="logo img" class="avatar" src="{{ site.avatar | relative_url }}" loading="lazy"/>
		</a>
        {% endif %}
        <a class="site-title" aria-label="{{ site.title }}" href="{{ '/' | relative_url }}">
        {{ site.title }}
		</a>
	</div>

    <!-- Toggle menu -->
    <nav class="clear">
    <a aria-label="pull" id="pull" class="toggle" href="#">
    <i class="fas fa-bars fa-lg"></i>
    </a>

    <!-- Menu -->
    <ul class="hide">
        {% assign name_page = "" %}

        {% for page in site.pages %}
            {% unless page.title == null or page.hide or name_page contains page.title %}
            <li class="separator"> | </li>
            <li>
                <a class="clear" aria-label="{{ page.title }}" title="{{ page.title }}" href="{{ page.url | relative_url }}">
                    {% if page.icon %} <i class="fas {{ page.icon }}" aria-hidden="true"></i>
                    {% else %} {{ page.title }} {% endif%}
                </a>
            </li>
            {% endunless %}
            {% assign name_page = page.title | append: name_page %}
        {% endfor %}

        {% if site.color_theme == 'auto' %}
        <li class="separator"> | </li>
        <li><a id="theme-toggle" title="Theme wechseln" aria-label="Theme wechseln" onclick="themeToggle()"></a></li>
        {% endif %}
        <!-- Spacestatus -->
        <li>
            <a href="https://www.netz39.de/status/">
                <img loading="lazy" alt="status" src="https://spaceapi.n39.eu/state.png" class="spacestatus">
            </a>
        </li>
    </ul>
	</nav>
</header>