templates/global/list-menu.html.twig line 1

{% set accordion_id = 'list-menu-accordion-' ~ random() %}

<div class="container-menu" data-list-menu-accordion="{{ accordion_id }}">
    <div class="row-menu">
        {% for item in model.categories %}
            <div class="col-menu item-anim">
                <h4 class="list-menu-heading">
                    <a href="{{ item.url }}">{{ item.title }}</a>
                    <button
                        type="button"
                        class="list-menu-toggle"
                        aria-expanded="false"
                        aria-controls="{{ accordion_id }}-section-{{ loop.index }}"
                        onclick="if (window.innerWidth > 814) return false; var root = this.closest('[data-list-menu-accordion]'); var list = document.getElementById(this.getAttribute('aria-controls')); var isExpanded = this.getAttribute('aria-expanded') === 'true'; if (!root || !list) return false; root.querySelectorAll('.list-menu-toggle').forEach(function(button) { var target = document.getElementById(button.getAttribute('aria-controls')); button.setAttribute('aria-expanded', 'false'); if (target) target.hidden = true; }); this.setAttribute('aria-expanded', String(!isExpanded)); list.hidden = isExpanded; return false;"
                    >
                        <span class="visually-hidden">{{ qi.texto('texto-mostrar-subcategorias') }} {{ item.title }}</span>
                        <span class="list-menu-toggle-arrow" aria-hidden="true"></span>
                    </button>
                </h4>
                <ul class="list-menu" id="{{ accordion_id }}-section-{{ loop.index }}" hidden>
                    {% for sub in item.items %}
                        {# @var sub \App\Dto\Core\ListMenuItem #}
                        <li>
                            <a href="{{ sub.url }}">{{ sub.title }}</a>
                        </li>
                    {% else %}
                        <li class="list-menu-empty">{{ qi.texto('texto-no-hay-disponibles') }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}
    </div>
</div>