<header class="header js-header">
    <div class="container">
        <div class="row">
            <div class="col-12 header__container">
                <div class="header__left-side">
                    <button type="button" title="Menu" class="header__hamburger js-hamburger">
                        <i class="header__icon-burger">{{ icon('burger') }}</i>
                        <span class="header__icon-description">Menu</span>
                    </button>
                    <button type="button" title="Menu" class="header__hamburger header__hamburger-close js-close-hamburger">
                        <i class="header__icon-burger">{{ icon('close') }}</i>
                        <span class="hide-item">Sluiten</span>
                    </button>
                    <a class="header__logo" href="{{ site.url }}" rel="home">
                        <img src="{{ site.assets.img }}/logo.svg" class="header__logo-img" alt="{{ site.name }} logo" />
                    </a>
                </div>
                <nav class="header__nav" aria-label="Hoofdmenu">
                    {% include  '@components/Header/'~header_variation ~ '/menu.twig' with {'items': main_menu.get_items, modifier: 'main-menu' } %}
                    <div class="header__nav-buttons">
                        <a href="{{ options.header_button.link }}" class="header__nav-button button--primary">{{ options.header_button.title }}</a>
                        {% include  '@components/Header/'~search_variation ~ '/search.twig' %}
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>
<nav id="nav-main" class="menu-side__container js-side-menu" aria-label="Burger menu">
    <div class="menu__nav-header d-flex">
        <button type="button" title="Menu" class="menu-side__close close-button js-close-hamburger">
            {{ icon('close', 'close-button__icon') }}
            <span class="hide-item">Sluiten</span>
        </button>
        <figure class="menu__logo">
            <img loading="lazy" alt="{{ site.name }} logo" class="show-print" src="{{ site.assets.img }}/logo.svg">
        </figure>
    </div>
    {% include  '@components/Header/'~header_variation ~ '/burger-menu.twig'  with {'items': main_menu.get_items, 'modifier' : 'main-level'} %}
</nav>
