templates/home/components/_tabs.html.twig line 1

<style>
    .tab-pane {
        display: none;
    }

    .tab-pane.active {
        display: block;
    }
    
</style>

<div class="tabs-container {{ container_class|default('') }}">
    {% for tab in tabs %}
        <div class="tabs-item">
            
            {% if tab.menu is defined or tab.component is defined %}
                <button
                    class="tab-link {{ tab.active|default(false) ? 'active' : '' }}"
                    type="button">
                    <span>{{ tab.label }}</span>
                </button>
            {% else %}
                <button
                    class="tab-link {{ tab.active|default(false) ? 'active' : '' }}"
                    data-tab="{{ tab.id }}"
                    type="button">
                    <span>{{ tab.label }}</span>
                    <i class="icon-chevron"></i>
                </button>
            {% endif %}
            
            {% if tab.menu is defined %}
                <div class="tab-dropdown">
                    {{ include('home/components/_tabs_dropdown.html.twig', {
                        items: tab.menu
                    }) }}
                </div>
            {% elseif tab.component is defined %}
                <div class="tab-dropdown tab-with-component">
                    {{ include(
                        tab.component.template,
                        tab.component.context|default({})
                    ) }}
                </div>
            {% endif %}
        </div>
    {% endfor %}
</div>

<script>
    document.addEventListener('click', (e) => {

        const btn = e.target.closest('.tab-link, .dropdown-link');
        if (!btn) return;

        const tabsContainer = btn.closest('.tabs-container');
        if (!tabsContainer) return;

        const root = tabsContainer.parentElement;

        /* ===== CERRAR TODOS LOS DROPDOWNS ===== */
        tabsContainer
            .querySelectorAll('.tab-dropdown.open, .dropdown-sub.open')
            .forEach(d => d.classList.remove('open'));

        /* ===== ACTIVAR TAB ===== */
        const tabLinks = tabsContainer.querySelectorAll('.tab-link');
        tabLinks.forEach(l => l.classList.remove('active'));

        const parentTab = btn.closest('.tabs-item')?.querySelector('.tab-link');
        if (parentTab) parentTab.classList.add('active');

        /* ===== CAMBIO DE CONTENIDO ===== */
        const tabId = btn.dataset.tab;
        if (tabId) {
            const tabPanes = root.querySelectorAll('.tab-pane');
            tabPanes.forEach(p => p.classList.remove('active', 'show'));

            const pane = root.querySelector(`#${tabId}`);
            if (pane) pane.classList.add('active', 'show');
        }

        /* ===== ABRIR DROPDOWN DEL TAB ACTUAL ===== */
        const dropdown = btn.nextElementSibling;
        if (
            dropdown &&
            (dropdown.classList.contains('tab-dropdown') ||
            dropdown.classList.contains('dropdown-sub'))
        ) {
            e.stopPropagation();
            dropdown.classList.add('open');
        }
    });

    document.addEventListener('click', (e) => {
        if (!e.target.closest('.tabs-container')) {
            document
                .querySelectorAll('.tab-dropdown.open, .dropdown-sub.open')
                .forEach(d => d.classList.remove('open'));
        }
    });
</script>