<header>
    <nav class="navbar">
        <div class="nav-title">
            <a class="home-title" href="{{ get_url(path='/', lang=lang, trailing_slash=(lang == config.default_language)) }}">{{ config.title }}</a>
        </div>

        {%- if config.extra.menu %}
            <div class="nav-navs">
                <ul>
                    {%- if config.extra.menu %}
                        {% for menu in config.extra.menu %}
                            <li>
                                {% set trailing_slash = menu.trailing_slash | default(value=true) %}
                                {%- if menu.url is starting_with("http") -%}
                                    {%- if trailing_slash -%}
                                        <a class="nav-links no-hover-padding" href="{{ menu.url }}/"
                                    {%- else -%}
                                        <a class="nav-links no-hover-padding" href="{{ menu.url }}"
                                    {%- endif -%}
                                    target="_blank" rel="noopener noreferrer">
                                {%- else -%}
                                    <a class="nav-links no-hover-padding" href="{{ get_url(path=menu.url, lang=lang, trailing_slash=trailing_slash) }}">
                                {%- endif -%}
                                {{ macros_translate::translate(key=menu.name, default=menu.name, language_strings=language_strings) }}
                                </a>
                            </li>
                        {% endfor %}
                    {%- endif -%}

                    {#- Wrap the icons to keep them all together -#}
                    <li class="menu-icons-container">
                        <ul class="menu-icons-group">
                            {# Search #}
                            {%- if config.build_search_index %}
                            {%- set search_icon_title = macros_translate::translate(key='search_icon_title', default='Press $SHORTCUT to open search', language_strings=language_strings) -%}
                            <li class="js menu-icon">
                                <div role="button" tabindex="0" id="search-button" class="search-icon interactive-icon" title="{{ search_icon_title }}" aria-label="{{ search_icon_title }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                                        <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
                                    </svg>
                                </div>
                            </li>
                            {%- endif %}

                            {# Language switcher #}
                            {# Displayed only if more than one language is available #}
                            {%- if config.languages | length > 0 %}
                            {% include "partials/language_switcher.html" %}
                            {%- endif %}

                            {# Theme switcher #}
                            {%- if config.extra.theme_switcher and config.extra.theme_switcher == true -%}
                            {%- include "partials/theme_switcher.html" -%}
                            {%- endif -%}
                        </ul>
                    </li>
                </ul>
            </div>
        {% endif %}
    </nav>
</header>
