<header class=“header clearfix”>

<nav id="kHeaderNav" class="navbar navbar-expand-lg container-fluid">
    <a class="navbar-brand {% if page.url == '/' %}navbar-brand-active{% endif %}" href="{{ '/index.html' | relative_url }}" id="KontactGlobalLogo">
        <img src="{% if site.app_icon %}{{ site.app_icon | relative_url }}{% else %}{{ '/assets/img/app_icon.png' | relative_url }}{% endif %}">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#kMainNavbar" aria-controls="kMainNavbar"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    {% unless site.not_made_by_kde %}
    <div id="KMadeByKDE">
        <a class="navbar-brand" id="KGlobalLogo" href="https://www.kde.org"></a>
        <span>Made by KDE</span>
    </div>
    {% endunless %}
    <div class="collapse navbar-collapse" id="kMainNavbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link {% if page.url == '/' %}active{% endif %}"
                   href="{{ '/' | relative_url }}" aria-haspopup="true" aria-expanded="false">{{ site.title }}</a>
            </li>

            {% if site.navigation.top %}
                {% assign sorted = site.navigation.top %}
            {% else %}
                {% assign sorted = site.pages | sort: "sorted" %}
            {% endif %}

            {% for nav in sorted %}
              {% if nav.subnav %}
              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbar{{nav.title|slugify}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    {{ nav.title }}
                </a>
                <div class="dropdown-menu" aria-labelledby="navbar{{nav.title|slugify}}">
                    {% for subnav in nav.subnav %}
                        <a class="dropdown-item" href="{{ subnav.url }}">{{ subnav.title }}</a>
                    {% endfor %}
                </div>
              </li>
              {% elsif nav.title and (nav.title != "Changelog" or (site.changelogs | size) != 0) %}
              <li class="nav-item">
                  <a class="nav-link {% if page.url == nav.url %}active{% endif %}" href="{{ nav.url }}">{{ nav.title }}</a>
              </li>
              {% endif %}
            {% endfor %}
        </ul>
    </div>
</nav>

</header>