<style>
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
</style>
{% set active_breadcrumbs = [] %}
{% if categoria is defined and categoria.nombre is defined %}
{% set found = false %}
{% for tab in tabs %}
{% if not found and tab.menu is defined %}
{% for cat in tab.menu %}
{% if not found %}
{% if cat.slug == categoria.slug or cat.label == categoria.nombre %}
{% set active_breadcrumbs = [cat.label] %}
{% set found = true %}
{% elseif cat.menu is defined %}
{% for sub in cat.menu %}
{% if not found %}
{% if sub.slug == categoria.slug or sub.label == categoria.nombre %}
{% set active_breadcrumbs = [cat.label, sub.label] %}
{% set found = true %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
<div class="container-breadcrumbs">
{% if active_breadcrumbs|length > 0 %}
<div class="tabs-breadcrumbs">
<div class="breadcrumbs-container">
<a href="{{ path('homepage', {_locale: locale|default('es')}) }}" class="crumb-home">
<iconify-icon icon="material-symbols:home-outline"></iconify-icon>
</a>
{% for crumb in active_breadcrumbs %}
<span class="separator">
/
</span>
<span class="crumb {{ loop.last ? 'active' : '' }}">{{ crumb }}</span>
{% endfor %}
</div>
</div>
{% endif %}
</div>
<div class="tabs-mobile-toggle-wrapper">
<button class="tabs-mobile-toggle" type="button" onclick="openTabsModal()">
<img src="{{ asset('images_v2/svg/ico-menu.svg') }}" alt="Menu">
<span>{{ qi.texto('label-categorias') }}</span>
</button>
</div>
<div class="tabs-container {{ container_class|default('') }} desktop-only">
{% 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>
<!-- Modal for Mobile -->
<div id="tabsModal" class="modal tabs-modal">
<div class="modal-content">
<button class="btn-close-modal" onclick="closeTabsModal()">
<img src="{{ asset('images_v2/svg/ico-close.svg') }}" alt="Close">
</button>
<div class="modal-body">
<div class="tabs-container {{ container_class|default('') }} is-mobile">
{% 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>
<i class="icon-chevron"></i>
</button>
{% else %}
<button class="tab-link {{ tab.active|default(false) ? 'active' : '' }}" data-tab="{{ tab.id }}" type="button">
<span>{{ tab.label }}</span>
</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>
</div>
</div>
</div>
<script>
function openTabsModal() {
const modal = document.getElementById('tabsModal');
modal.classList.add('show-modal');
document.body.classList.add('no-scroll');
}
function closeTabsModal() {
const modal = document.getElementById('tabsModal');
modal.classList.remove('show-modal');
document.body.classList.remove('no-scroll');
}
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 isMobile = tabsContainer.classList.contains('is-mobile');
const root = tabsContainer.parentElement;
/* ===== CERRAR OTROS DROPDOWNS SOLO EN DESKTOP ===== */
if (!isMobile) {
tabsContainer
.querySelectorAll('.tab-dropdown.open, .dropdown-sub.open')
.forEach(d => {
if (d !== btn.nextElementSibling) 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 (Redirect/Tab switch) ===== */
const tabId = btn.dataset.tab;
if (tabId) {
const pageRoot = document.querySelector('body'); // Or a more specific root
const tabPanes = pageRoot.querySelectorAll('.tab-pane');
tabPanes.forEach(p => p.classList.remove('active', 'show'));
const pane = pageRoot.querySelector(`#${tabId}`);
if (pane) {
pane.classList.add('active', 'show');
if (isMobile) closeTabsModal();
}
}
/* ===== TOGGLE DROPDOWN DEL TAB ACTUAL ===== */
const dropdown = btn.nextElementSibling;
const hasVisibleDropdown = dropdown && (
dropdown.classList.contains('tab-dropdown') ||
dropdown.classList.contains('dropdown-sub')
);
if (hasVisibleDropdown) {
e.stopPropagation();
if (isMobile) {
// Accordion logic: Close siblings at the same level before opening this one
if (!dropdown.classList.contains('open')) {
const parent = btn.closest('.tabs-container, .dropdown-list');
if (parent) {
const selector = btn.classList.contains('tab-link') ? '.tab-dropdown.open' : '.dropdown-sub.open';
parent.querySelectorAll(selector).forEach(d => {
d.classList.remove('open');
d.previousElementSibling?.classList.remove('open-parent');
});
}
dropdown.classList.add('open');
btn.classList.add('open-parent');
return; // Stop navigation on first click
}
} else {
dropdown.classList.add('open');
}
}
/* ===== NAVEGACIÓN ===== */
const url = btn.dataset.url;
if (url) {
window.location.href = url;
return;
}
});
// Close when clicking outside of modal content
window.addEventListener('click', (e) => {
const modal = document.getElementById('tabsModal');
if (e.target === modal) {
closeTabsModal();
}
// Desktop close on outside click
if (!e.target.closest('.tabs-container') && !e.target.closest('.tabs-mobile-toggle')) {
document
.querySelectorAll('.tabs-container:not(.is-mobile) .tab-dropdown.open, .tabs-container:not(.is-mobile) .dropdown-sub.open')
.forEach(d => d.classList.remove('open'));
}
});
</script>