test
This commit is contained in:
@@ -81,60 +81,85 @@ class UXManager {
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation Manager - Gestion des menus
|
||||
// Navigation Manager - Gestion des menus (VERSION CORRIGÉE)
|
||||
class NavigationManager {
|
||||
constructor() {
|
||||
this.currentOpenMenu = null;
|
||||
this.activeMenuId = null; // Menu actif basé sur la page courante
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupActiveMenu();
|
||||
this.setupMenuBehavior();
|
||||
this.setupKeyboardNavigation();
|
||||
this.setupActiveMenu();
|
||||
}
|
||||
|
||||
setupActiveMenu() {
|
||||
// Déterminer le menu actif basé sur la page courante
|
||||
const activeParentId = window.appConfig?.activeParentId;
|
||||
const activeLink = window.appConfig?.activeLink;
|
||||
|
||||
console.log('[Navigation] Page active:', activeLink, 'Parent ID:', activeParentId);
|
||||
|
||||
if (activeParentId !== null && activeParentId !== '') {
|
||||
this.activeMenuId = `submenu${activeParentId}`;
|
||||
console.log('[Navigation] Menu actif détecté:', this.activeMenuId);
|
||||
|
||||
// Ouvrir seulement le menu actif
|
||||
setTimeout(() => {
|
||||
this.openMenu(this.activeMenuId);
|
||||
this.currentOpenMenu = this.activeMenuId;
|
||||
}, 100);
|
||||
} else {
|
||||
console.log('[Navigation] Aucun menu actif détecté');
|
||||
// Fermer tous les menus par défaut
|
||||
this.closeAllMenus();
|
||||
}
|
||||
}
|
||||
|
||||
setupMenuBehavior() {
|
||||
// Désactiver le comportement Bootstrap par défaut
|
||||
// Pour chaque lien de menu avec sous-menu
|
||||
document.querySelectorAll('.nav-link[data-bs-toggle="collapse"]').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const targetId = link.getAttribute('href').substring(1);
|
||||
this.toggleMenu(targetId, e);
|
||||
console.log('[Navigation] Clic sur menu:', targetId);
|
||||
|
||||
// Si on clique sur le menu déjà ouvert, on le ferme
|
||||
if (this.currentOpenMenu === targetId) {
|
||||
this.closeMenu(targetId);
|
||||
this.currentOpenMenu = null;
|
||||
} else {
|
||||
// Fermer le menu précédent si différent
|
||||
if (this.currentOpenMenu && this.currentOpenMenu !== targetId) {
|
||||
this.closeMenu(this.currentOpenMenu);
|
||||
}
|
||||
|
||||
// Ouvrir le nouveau menu
|
||||
this.openMenu(targetId);
|
||||
this.currentOpenMenu = targetId;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Fermer le menu en cliquant ailleurs
|
||||
// Fermer les menus en cliquant ailleurs
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.app-sidebar')) {
|
||||
this.closeAllMenus();
|
||||
// Ne pas fermer le menu actif s'il correspond à la page courante
|
||||
if (this.currentOpenMenu !== this.activeMenuId) {
|
||||
this.closeAllMenus();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toggleMenu(menuId, event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
const menu = document.getElementById(menuId);
|
||||
const link = document.querySelector(`[href="#${menuId}"]`);
|
||||
|
||||
if (!menu || !link) return;
|
||||
|
||||
// Si ce menu est déjà ouvert, le fermer
|
||||
if (this.currentOpenMenu === menuId) {
|
||||
this.closeMenu(menuId);
|
||||
this.currentOpenMenu = null;
|
||||
} else {
|
||||
// Fermer le menu actuellement ouvert
|
||||
if (this.currentOpenMenu) {
|
||||
this.closeMenu(this.currentOpenMenu);
|
||||
}
|
||||
|
||||
// Ouvrir le nouveau menu
|
||||
this.openMenu(menuId);
|
||||
this.currentOpenMenu = menuId;
|
||||
}
|
||||
// Empêcher la fermeture du menu actif
|
||||
document.querySelectorAll('.nav-submenu').forEach(menu => {
|
||||
menu.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
openMenu(menuId) {
|
||||
@@ -142,10 +167,29 @@ class NavigationManager {
|
||||
const link = document.querySelector(`[href="#${menuId}"]`);
|
||||
|
||||
if (menu && link) {
|
||||
// Retirer 'show' de tous les autres menus
|
||||
document.querySelectorAll('.nav-submenu.show').forEach(otherMenu => {
|
||||
if (otherMenu.id !== menuId) {
|
||||
otherMenu.classList.remove('show');
|
||||
const otherLink = document.querySelector(`[href="#${otherMenu.id}"]`);
|
||||
if (otherLink) {
|
||||
otherLink.setAttribute('aria-expanded', 'false');
|
||||
otherLink.classList.remove('active');
|
||||
const arrow = otherLink.querySelector('.nav-arrow');
|
||||
if (arrow) arrow.style.transform = 'rotate(0deg)';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Ouvrir le menu sélectionné
|
||||
menu.classList.add('show');
|
||||
link.classList.add('active');
|
||||
link.setAttribute('aria-expanded', 'true');
|
||||
link.querySelector('.nav-arrow').style.transform = 'rotate(90deg)';
|
||||
link.classList.add('active');
|
||||
|
||||
const arrow = link.querySelector('.nav-arrow');
|
||||
if (arrow) arrow.style.transform = 'rotate(90deg)';
|
||||
|
||||
console.log('[Navigation] Menu ouvert:', menuId);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -154,19 +198,35 @@ class NavigationManager {
|
||||
const link = document.querySelector(`[href="#${menuId}"]`);
|
||||
|
||||
if (menu && link) {
|
||||
// Ne pas fermer le menu actif si c'est celui de la page courante
|
||||
if (menuId === this.activeMenuId) {
|
||||
console.log('[Navigation] Menu actif, ne pas fermer:', menuId);
|
||||
return;
|
||||
}
|
||||
|
||||
menu.classList.remove('show');
|
||||
link.classList.remove('active');
|
||||
link.setAttribute('aria-expanded', 'false');
|
||||
link.querySelector('.nav-arrow').style.transform = 'rotate(0deg)';
|
||||
link.classList.remove('active');
|
||||
|
||||
const arrow = link.querySelector('.nav-arrow');
|
||||
if (arrow) arrow.style.transform = 'rotate(0deg)';
|
||||
|
||||
console.log('[Navigation] Menu fermé:', menuId);
|
||||
}
|
||||
}
|
||||
|
||||
closeAllMenus() {
|
||||
// Ne fermer que les menus qui ne sont pas actifs
|
||||
document.querySelectorAll('.nav-submenu.show').forEach(menu => {
|
||||
const menuId = menu.id;
|
||||
this.closeMenu(menuId);
|
||||
if (menu.id !== this.activeMenuId) {
|
||||
this.closeMenu(menu.id);
|
||||
}
|
||||
});
|
||||
this.currentOpenMenu = null;
|
||||
|
||||
// Si aucun menu actif, réinitialiser
|
||||
if (!this.activeMenuId) {
|
||||
this.currentOpenMenu = null;
|
||||
}
|
||||
}
|
||||
|
||||
setupKeyboardNavigation() {
|
||||
@@ -197,16 +257,15 @@ class NavigationManager {
|
||||
}
|
||||
}
|
||||
|
||||
setupActiveMenu() {
|
||||
// Ouvrir automatiquement le menu actif au chargement
|
||||
const activeParentId = window.appConfig.activeParentId;
|
||||
if (activeParentId !== null && activeParentId !== '') {
|
||||
const menuId = `submenu${activeParentId}`;
|
||||
setTimeout(() => {
|
||||
this.openMenu(menuId);
|
||||
this.currentOpenMenu = menuId;
|
||||
}, 100);
|
||||
}
|
||||
// Méthode publique pour forcer l'ouverture d'un menu
|
||||
openMenuById(menuId) {
|
||||
this.openMenu(menuId);
|
||||
this.currentOpenMenu = menuId;
|
||||
}
|
||||
|
||||
// Méthode publique pour forcer la fermeture
|
||||
closeAllExceptActive() {
|
||||
this.closeAllMenus();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user