Sidebars - animaciones

This commit is contained in:
2025-07-18 12:21:26 -06:00
parent 1900091b99
commit 37dcfffd7b
69 changed files with 1282 additions and 710 deletions

View File

@@ -59,7 +59,7 @@
<div class="navbar-content">
<?php
// Verifica si estás en el dashboard principal del importador
$esDashboard = str_contains($_SERVER['REQUEST_URI'], '/agencias/dashboard');
$esDashboard = str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/agencias/dashboard');
if ($esDashboard): ?>
<span id="welcome-text">Bienvenido, <?= htmlspecialchars($_SESSION['usuario_nombre']) ?></span>
@@ -107,7 +107,7 @@
</li>
<!-- Patentes -->
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#submenuPatentes" role="button" aria-expanded="false">
<a class="nav-link" data-bs-toggle="collapse" href="#submenuPatentesDesktop" role="button" aria-expanded="false" aria-controls="submenuPatentesDesktop">
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
</svg>
@@ -116,7 +116,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</a>
<div class="collapse" id="submenuPatentes">
<div class="collapse" id="submenuPatentesDesktop">
<ul class="nav flex-column submenu">
<li class="nav-item">
<a href="/IMPORTADORES/patente/lista" class="nav-link">
@@ -133,7 +133,7 @@
</li>
<!-- LOCACIONES -->
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#submenuLocaciones" role="button" aria-expanded="false">
<a class="nav-link" data-bs-toggle="collapse" href="#submenuLocacionesDesktop" role="button" aria-expanded="false" aria-controls="submenuLocacionesDesktop">
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2C6.686 2 4 4.686 4 8c0 5.25 6 12 6 12s6-6.75 6-12c0-3.314-2.686-6-6-6zm0 8c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/>
</svg>
@@ -142,7 +142,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</a>
<div class="collapse" id="submenuLocaciones">
<div class="collapse" id="submenuLocacionesDesktop">
<ul class="nav flex-column submenu">
<li class="nav-item">
<a href="/IMPORTADORES/locaciones/lista" class="nav-link">
@@ -221,7 +221,7 @@
</li>
<!-- Patentes -->
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#submenuPatentes" role="button" aria-expanded="false">
<a class="nav-link" data-bs-toggle="collapse" href="#submenuPatentesMobile" role="button" aria-expanded="false" aria-controls="submenuPatentesMobile">
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
</svg>
@@ -230,7 +230,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</a>
<div class="collapse" id="submenuPatentes">
<div class="collapse" id="submenuPatentesMobile">
<ul class="nav flex-column submenu">
<li class="nav-item">
<a href="/IMPORTADORES/patente/lista" class="nav-link">
@@ -247,7 +247,7 @@
</li>
<!-- LOCACIONES -->
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#submenuLocaciones" role="button" aria-expanded="false">
<a class="nav-link" data-bs-toggle="collapse" href="#submenuLocacionesMobile" role="button" aria-expanded="false" aria-controls="submenuLocacionesMobile">
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2C6.686 2 4 4.686 4 8c0 5.25 6 12 6 12s6-6.75 6-12c0-3.314-2.686-6-6-6zm0 8c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/>
</svg>
@@ -256,7 +256,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</a>
<div class="collapse" id="submenuLocaciones">
<div class="collapse" id="submenuLocacionesMobile">
<ul class="nav flex-column submenu">
<li class="nav-item">
<a href="/IMPORTADORES/locaciones/lista" class="nav-link">
@@ -299,13 +299,17 @@
<script>
// Simular lógica de dashboard
document.addEventListener('DOMContentLoaded', function() {
const esDashboard = window.location.pathname.includes('/administrador/dashboard');
const esDashboard = window.location.pathname.includes('/agencias/dashboard');
const welcomeText = document.getElementById('welcome-text');
const logoutBtn = document.getElementById('logout-btn');
if (!esDashboard) {
welcomeText.style.display = 'none';
logoutBtn.style.display = 'inline-block';
if (welcomeText) {
welcomeText.style.display = 'none';
}
if (logoutBtn) {
logoutBtn.style.display = 'inline-block';
}
}
// Manejar estados activos basados en URL actual
@@ -319,31 +323,66 @@
}
});
// Manejar collapse manualmente
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(trigger => {
// Desactivar Bootstrap
trigger.removeAttribute('data-bs-toggle');
// Inicializar estado correcto
const target = document.querySelector(trigger.getAttribute('href'));
if (target) {
target.style.transition = 'height 0.3s ease, opacity 0.2s ease';
target.style.overflow = 'hidden';
if (!target.classList.contains('show')) {
target.style.height = '0';
target.style.opacity = '0';
}
}
trigger.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
const isExpanded = this.getAttribute('aria-expanded') === 'true';
if (targetElement) {
if (isExpanded) {
// Cerrar
targetElement.classList.remove('show');
this.setAttribute('aria-expanded', 'false');
} else {
// Abrir
targetElement.classList.add('show');
this.setAttribute('aria-expanded', 'true');
}
const target = document.querySelector(this.getAttribute('href'));
const icon = this.querySelector('.collapse-icon');
if (!target) return;
const isExpanding = this.getAttribute('aria-expanded') !== 'true';
if (isExpanding) {
// Abrir
target.classList.add('show');
target.style.height = '0';
target.style.opacity = '0';
target.style.display = 'block';
// Forzar reflow
void target.offsetHeight;
target.style.height = target.scrollHeight + 'px';
target.style.opacity = '1';
this.setAttribute('aria-expanded', 'true');
if (icon) icon.style.transform = 'rotate(180deg)';
} else {
// Cerrar
target.style.height = target.scrollHeight + 'px';
target.style.opacity = '1';
// Forzar reflow
void target.offsetHeight;
target.style.height = '0';
target.style.opacity = '0';
setTimeout(() => {
target.classList.remove('show');
target.style.display = '';
}, 300);
this.setAttribute('aria-expanded', 'false');
if (icon) icon.style.transform = 'rotate(0deg)';
}
});
// Remover el atributo data-bs-toggle para evitar conflictos
trigger.removeAttribute('data-bs-toggle');
});
});
</script>