{% if menu.primary or menu.secondary %}

    <button class="mobile-menu-toggle menu-toggle" aria-controls="primary-menu secondary-menu" aria-expanded="false" {{ fn( 'RomhackPlaza\\Backwards\\treville_amp_menu_toggle') }}>
        {{ svg_icon('menu') }}
        {{ svg_icon('close') }}
        <span class="menu-toggle-text screen-reader-text">{{ __('Menu', 'romhackplaza')|esc_html }}</span>
    </button>

{% endif %}

{% if menu.secondary %}

    <div class="secondary-navigation" {{ fn( 'RomhackPlaza\\Backwards\\treville_amp_secondary_menu_is_toggled') }} >

        <nav id="header-navigation" class="top-navigation" role="navigation" aria-label="{{ __('Secondary Menu', 'romhackplaza')|esc_attr }}">

            <ul id="secondary-menu" class="menu">
                {% for item in menu.secondary.items %}
                    <li class=" {{ item.classes|join(' ') }}">
                        <a href="{{ item.link }}" {{ item.is_target_blank ? 'target="_blank"' }}>{{ item.title }}</a>


                        {% if item.children %}
                            <ul class="sub-menu">
                                {% for child in item.children %}
                                    <li class="menu-item {{ child.classes|join(' ') }}">
                                        <a href="{{ child.link }}" {{ child.is_target_blank ? 'target="_blank"' }}>{{ child.title }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>

        </nav>

    </div>

{% endif %}