header.html

{% comment %}
    Header Design for HIFIS Webites

    This file specifies the structure for the headers of HIFIS-related websites.
    It observes the Helmholtz corporate design guidelines.

    The header is a floating section with light gray background and contains
        * the HIFIS logo
        * navigation
        * a transitional element that visually separates the header from the
            remaining content of the site

In the case of a mobile end device the navigation will be turned into a menu
which can be toggled to expand or collapse.
The contents of the navigation is generated by Jekyll from
    /_data/navigation.yaml

See also:
    /assets/css/header.scss
    /_includes/header_transition.svg
{% endcomment %}

{% if site.baseurl != '/' %}
{% assign base_url = site.baseurl | append: '/' %}
{% else %}
{% assign base_url = site.baseurl %}
{% endif %}

<header id="header" class="header">

    <div id="header-content-container">

        <a href="{{ base_url }}" class="logo-link">
            <img
                id="header-logo"
                class="logo"
                src="{{ '/assets/img/HIFIS_Logo_cropped.svg' | relative_url }}"
                alt="HIFIS Logo"
            >
        </a>

        {% comment %}
            The following button is not displayed in desktop mode, but will
            replace the navigation list on smaller displays.
            When clicked the button will toggle the 'active' class.
            The associated CSS will then display the navigation elements as a
            menu.
        {% endcomment %}
        <button
            class="js-mobile_nav-toggle nav_toggle"
            onclick="this.classList.toggle('active')">
        </button>

        <nav>
            {% for entry in site.data.navigation.header %}
                <a href="{{ entry.url | relative_url }}" class="btn btn-header">
                    <span class="navigation-entry">
                        <i class="navigation-icon {{ entry.fontawesome_class }}"
                           title="{{ entry.title }}">
                        </i>
                        <span class="navigation-text">{{ entry.title }}</span>
                    </span>
                </a>
            {% endfor %}
        </nav>

    </div>

    {% include transition.html %}

</header>