fix: reposicionar dropdown del usuario en navbar para que sea accesible en móvil y desktop
This commit is contained in:
@@ -114,10 +114,6 @@ body {
|
|||||||
animation: slideDown 0.2s ease;
|
animation: slideDown 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu.show {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideDown {
|
@keyframes slideDown {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
@@ -15,68 +15,6 @@
|
|||||||
if (debugList) {
|
if (debugList) {
|
||||||
debugList.remove();
|
debugList.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fix para dropdowns en móvil
|
|
||||||
const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
|
|
||||||
dropdownToggles.forEach(toggle => {
|
|
||||||
toggle.addEventListener('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
// Obtener el elemento dropdown
|
|
||||||
const dropdown = this.closest('.dropdown') || this.parentElement;
|
|
||||||
const menu = this.nextElementSibling;
|
|
||||||
|
|
||||||
if (menu && menu.classList.contains('dropdown-menu')) {
|
|
||||||
// Toggle la clase 'show'
|
|
||||||
if (menu.classList.contains('show')) {
|
|
||||||
menu.classList.remove('show');
|
|
||||||
this.classList.remove('show');
|
|
||||||
this.setAttribute('aria-expanded', 'false');
|
|
||||||
} else {
|
|
||||||
// Cerrar otros dropdowns
|
|
||||||
document.querySelectorAll('.dropdown-menu.show').forEach(m => {
|
|
||||||
m.classList.remove('show');
|
|
||||||
m.previousElementSibling?.classList.remove('show');
|
|
||||||
});
|
|
||||||
|
|
||||||
menu.classList.add('show');
|
|
||||||
this.classList.add('show');
|
|
||||||
this.setAttribute('aria-expanded', 'true');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cerrar dropdowns al hacer clic en un item
|
|
||||||
const dropdownItems = document.querySelectorAll('.dropdown-item');
|
|
||||||
dropdownItems.forEach(item => {
|
|
||||||
item.addEventListener('click', function() {
|
|
||||||
// Cerrar todos los dropdowns
|
|
||||||
document.querySelectorAll('.dropdown-menu.show').forEach(m => {
|
|
||||||
m.classList.remove('show');
|
|
||||||
m.previousElementSibling?.classList.remove('show');
|
|
||||||
});
|
|
||||||
document.querySelectorAll('.dropdown-toggle.show').forEach(t => {
|
|
||||||
t.classList.remove('show');
|
|
||||||
t.setAttribute('aria-expanded', 'false');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cerrar dropdowns al hacer clic fuera
|
|
||||||
document.addEventListener('click', function(e) {
|
|
||||||
if (!e.target.closest('.dropdown') && !e.target.closest('.nav-item.dropdown')) {
|
|
||||||
document.querySelectorAll('.dropdown-menu.show').forEach(m => {
|
|
||||||
m.classList.remove('show');
|
|
||||||
m.previousElementSibling?.classList.remove('show');
|
|
||||||
});
|
|
||||||
document.querySelectorAll('.dropdown-toggle.show').forEach(t => {
|
|
||||||
t.classList.remove('show');
|
|
||||||
t.setAttribute('aria-expanded', 'false');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -95,10 +95,22 @@ if (!isset($_SESSION['language'])) {
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<!-- User menu -->
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="navUser" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="cursor: pointer;">
|
||||||
|
<i class="bi bi-person-circle me-1"></i><?php echo htmlspecialchars($_SESSION['username']); ?>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="navUser">
|
||||||
|
<li><a class="dropdown-item" href="<?php echo site_url('profile.php'); ?>" data-translate="true"><i class="bi bi-person-circle me-2"></i>Perfil</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="<?php echo site_url('logout.php'); ?>" data-translate="true"><i class="bi bi-box-arrow-right me-2"></i>Cerrar Sesión</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- Right side: Language selector, DB info, Profile, Logout -->
|
<!-- Right side: Language selector, DB info -->
|
||||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
<div class="d-flex align-items-center gap-2 flex-wrap ms-auto">
|
||||||
<select class="form-select form-select-sm w-auto" id="language-selector" style="max-width: 120px;">
|
<select class="form-select form-select-sm w-auto" id="language-selector" style="max-width: 120px;">
|
||||||
<!-- Options will be populated by translate_frontend.js -->
|
<!-- Options will be populated by translate_frontend.js -->
|
||||||
</select>
|
</select>
|
||||||
@@ -121,18 +133,6 @@ if (!isset($_SESSION['language'])) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<!-- User menu -->
|
|
||||||
<div class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="navUser" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<i class="bi bi-person-circle me-1"></i><?php echo htmlspecialchars($_SESSION['username']); ?>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navUser">
|
|
||||||
<li><a class="dropdown-item" href="<?php echo site_url('profile.php'); ?>" data-translate="true"><i class="bi bi-person-circle me-2"></i>Perfil</a></li>
|
|
||||||
<li><hr class="dropdown-divider"></li>
|
|
||||||
<li><a class="dropdown-item" href="<?php echo site_url('logout.php'); ?>" data-translate="true"><i class="bi bi-box-arrow-right me-2"></i>Cerrar Sesión</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user