{% 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_short_RGB_cropped.svg' | relative_url }}"
                alt="HIFIS Logo"
            >         
        </a>


        <div>
            {% comment %}
                The search button shall always be visible.
            {% endcomment %}
            <a href="{{ 'search' | relative_url }}" class="outer-nav-item"><i class="fas fa-search"></i></a>

            {% comment %}
                The following button shall be always minimized (hamburger menu).
            {% endcomment %}
            <input type="checkbox" id="mobile_toggle" class="d-none">
            <label for="mobile_toggle" class="nav_toggle" onclick="scrollableHeader()"></label>

            <nav>
                <ul class="nav-grid">
                    {% for category in site.data.navigation.header %}
                    <li class="nav-first-level">
                        {% if category.url %}
                        <a href="{{ category.url | relative_url }}">{{ category.title }}</a>
                        {% else %}
                        {{ category.title }}
                        {% endif %}
                        {% for entry in category.entries %}
                        <ul>
                        {% if entry.entries %}
                            <li class="nav-second-level">
                                <details>
                                    <summary>
                                        {{ entry.title }}
                                    </summary>
                                    <ul>
                                    {% for subentry in entry.entries %}
                                    <li class="nav-third-level">
                                        <a href="{{ subentry.url | relative_url }}">
                                            {{ subentry.title }} {% if subentry.external %}<i class="fas fa-external-link-alt"></i>{% endif %}
                                        </a>
                                    </li>
                                    {% endfor %}
                                    </ul>
                                </details>
                            </li>
                        {% else %}
                            <li class="nav-second-level">
                                <a href="{{ entry.url | relative_url }}">
                                    {{ entry.title }} {% if entry.external %}<i class="fas fa-external-link-alt"></i>{% endif %}
                                </a>
                            </li>
                        {% endif %}
                        </ul>
                        {% endfor %}
                    </li>
                    {% endfor %}
                </ul>
            </nav>
        </div>

    </div>

    {% include transition.html direction="bottom"%}

</header>