<div class="hiddenMenu d-flex flex-column justify-content-between shadow">
<div class="hiddenMenu--header d-flex align-items-center">
<ul class="hiddenMenu--header-list d-flex align-items-center col-12">
{% for locale in locales %}
{% if params_extra is defined %}
{% for index, param_extra in params_extra %}
{% if index in params|keys %}
{% set params = params|merge({(''~index): attribute(param_extra, locale)}) %}
{% endif %}
{% endfor %}
{% endif %}
<li class="hiddenMenu--header-list-item">
<a href="{{ path(route, params|merge({ _locale: locale })) }}"
hreflang="{% if locale == 'ja' %}x-default{% else %}{{ locale }}{% endif %}"
class="{% if currentLocale == locale %}current{% endif %}">
{{ locale|upper }}
</a>
</li>
{% endfor %}
</ul>
<span class="hiddenMenu--header-close"><i class="fas fa-times fa-2x"></i></span>
</div>
<div class="hiddenMenu--menu d-flex justify-content-center justify-content-sm-start ">
<ul class="hiddenMenu--menu-list d-flex col-12 flex-wrap m-0">
{% for key, menu in menus %}
<li class="hiddenMenu--menu-list-item p-0 col-12">
{{ key }}.
{% if key == '07' %}
<a href="{{ path(menu.route, menu.params|merge({ _locale: currentLocale, sectionSlug: section_acoustic.slug })) }}">{{ "Acoustic Comfort Backing"|trans }}</a>
{% elseif key == '08' %}
<a href="{{ path(menu.route, menu.params|merge({ _locale: currentLocale, sectionSlug: section_sustainability.slug })) }}">{{ menu.title|trans }}</a>
{% else %}
{% if key == '10' %}
<a id="btn-contact-side-bar" href="{{ contact_url }}" hreflang="{% if app.request.getLocale() == 'ja' %}x-default{% else %}{{ currentLocale }}{% endif %}">{{ menu.title|trans }}</a>
{% else %}
<a href="{{ path(menu.route, menu.params|merge({ _locale: currentLocale })) }}" hreflang="{% if app.request.getLocale() == 'ja' %}x-default{% else %}{{ currentLocale }}{% endif %}">{{ menu.title|trans }}</a>
{% endif %}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<div class="hiddenMenu--footer mb-sm-0">
</div>
</div>