<header>
    {#{% if post.thumbnail is not empty %}#}
    {#<div class="hero">#}
    {#<div class="hero-image" style="background-image:url({{ post.thumbnail }})">#}
    {#<h1>{{ post.title }}</h1>#}
    {#</div>#}
    {#</div>#}
    {#{% endif %}#}
    <div class="off-canvas position-top is-transition-overlap is-closed" id="offCanvas" data-off-canvas data-transition="overlap">

        <!-- Close button -->
{#        <button class="close-button" aria-label="Close menu" type="button" data-close>#}
{#            <span aria-hidden="true">&times;</span>#}
{#        </button>#}

        <div class="title-bar menu-title-bar">


            <div class="title-bar-left">

                            <span class="title-bar-title">
                                <a href="{{ site.link }}" class="logo">
                                <img src="/wp-content/themes/meg/static/images/MEG-Logo-white.svg" width="100%">
                                </a>
                            </span>

                <div class="language-menu">
                    {% for code,language in languages %}
                        <a href="{{ language.url }}" class="menu-item {{ language.active ? 'active' : '' }}"
                           }}>{{ code|upper }}</a> {{ loop.last ? '' : ' | ' }}
                    {% endfor %}
                </div>
            </div>

            <div class="title-bar-center">
            <span class="title-bar-title">
                <a href="{{ site.link }}" class="logo" data-close>
                    <img src="/wp-content/themes/meg/static/images/MEG-Logo-primary.svg" width="100%">
                </a>
            </span>
            </div>

            <div class="title-bar-right">
                <div class="toggle-offcanvas" data-toggle="offCanvas"><span id="toggler"></span><span
                            id="toggle-text">Menu</span></div>
            </div>

        </div>

        <!-- Menu -->

        {% include 'partials/navigation/menu.twig' with {'menu':primary.get_items} %}

        <div class="title-bar secondary-title-bar">


            <div class="title-bar-left">

                {#            <span class="title-bar-title">#}
                {#                <a href="{{ site.link }}" class="logo">#}
                {#                <img src="/wp-content/themes/meg/static/images/MEG-Logo-white.svg" width="100%">#}
                {#                </a>#}
                {#            </span>#}

                <div class="language-menu">
                    {% for code,language in languages %}
                        <a href="{{ language.url }}" class="menu-item {{ language.active ? 'active' : '' }}"
                           }}>{{ code|upper }}</a> {{ loop.last ? '' : ' | ' }}
                    {% endfor %}
                </div>
            </div>

            <div class="title-bar-center">
            <span class="title-bar-title">
                <a href="{{ site.link }}" class="logo">
                    <img id="logo-white" src="/wp-content/themes/meg/static/images/MEG-Logo-primary.svg" width="100%">
                </a>
            </span>
            </div>

            <div class="title-bar-right">
                <div class="toggle-offcanvas" data-toggle="offCanvas"><span id="toggler"></span><span
                            id="toggle-text">Menu</span></div>
            </div>

        </div>
    </div>

    {#<div class="off-canvas-content" data-off-canvas-content>#}
    {#<!-- Your page content lives here -->#}
    {#</div>#}


</header>
