<header class="site-header">
    <nav id="mainmenuNavbar" class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="{{ site.baseurl }}/">
                <img src="{{ site.data.author.brand_logo }}" width="30" height="30" class="d-inline-block align-top"
                     alt="{{ site.data.author.brand }} Brand Icon">
                {{ site.title }}
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    {% for item in site.data.header-menu.items %}
                    <li class="nav-item">
                        <a class="nav-link{% if item.link == page.url %} active{% endif %}" href="{{ item.link | relative_url }}">
                            {{ item.title }}
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </nav>
    {% for item in site.data.header-menu.items %}
        {% if item.items %}
            {% if page.url == item.link or page.parent_link == item.link %}
                <nav id="submenuNavbar" class="navbar navbar-expand-lg navbar-light fixed-top">
                    <div class="container">
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                                data-bs-target="#subnavbarSupportedContent" aria-controls="subnavbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse" id="subnavbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                {% for subitem in item.items %}
                                <li class="nav-item">
                                    <a class="nav-link{% if subitem.link == page.url %} active{% endif %}"
                                       href="{{ subitem.link | relative_url }}">{{ subitem.title }}</a>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </nav>
            {% endif %}
        {% endif %}
    {% endfor %}
</header>
