<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 = "" %}
        {% assign emptyArray = '' | split: '' %}
        {% assign menus = site.data.menu | default: emptyArray %}
        {% assign pages = site.pages | concat: menus | sort: 'position' %}
        {% for page in 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="navbar-icon fas {{ page.icon }}" aria-hidden="true"></i>{% endif %}
                    <span class="navbar-label {% if page.icon %}navbar-label-with-icon{% endif%}">{{ page.title }}</span>
                </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>