drt
This commit is contained in:
parent
47d98c43a6
commit
f84eb4e75b
139
Vue/gabarit.php
139
Vue/gabarit.php
|
|
@ -302,16 +302,12 @@ $photoAssureCrypte = $_SESSION['photoAssureCrypte'];
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="app-sidebar" id="sidebar">
|
||||
<nav class="sidebar-nav" aria-label="Navigation principale">
|
||||
<div class="nav-section">
|
||||
<?php foreach ($menus as $key0 => $menuParent):
|
||||
$menuChildrenLevelOne = $gabary->get_menus_by_parent_code($menuParent['vue']);
|
||||
|
||||
// DEBUG: Afficher l'info
|
||||
echo "<!-- Menu {$key0}: {$menuParent['libeleMenu']} - Enfants: " . count($menuChildrenLevelOne) . " -->\n";
|
||||
|
||||
$isParentActive = $activeParentId === $key0;
|
||||
$hasActiveChild = false;
|
||||
|
||||
|
|
@ -325,42 +321,39 @@ $photoAssureCrypte = $_SESSION['photoAssureCrypte'];
|
|||
$shouldBeOpen = ($isParentActive || $hasActiveChild) && $activeParentId !== null;
|
||||
?>
|
||||
<div class="nav-item">
|
||||
<?php if (sizeof($menuChildrenLevelOne) > 0): ?>
|
||||
<a href="#submenu<?= $key0 ?>"
|
||||
class="nav-link <?= $shouldBeOpen ? 'active' : '' ?>"
|
||||
data-bs-toggle="collapse"
|
||||
onclick="appNavigation.toggleMenu('submenu<?= $key0 ?>', event)"
|
||||
aria-expanded="<?= $shouldBeOpen ? 'true' : 'false' ?>"
|
||||
aria-controls="submenu<?= $key0 ?>"
|
||||
data-menu-id="submenu<?= $key0 ?>"
|
||||
data-label="<?= htmlspecialchars($menuParent['libeleMenu']) ?>">
|
||||
<i class="<?= $menuParent['icone'] ?>"></i>
|
||||
<span class="nav-text"><?= $menuParent['libeleMenu'] ?></span>
|
||||
<i class="nav-arrow bi bi-chevron-right"></i>
|
||||
</a>
|
||||
|
||||
<div class="nav-submenu collapse <?= $shouldBeOpen ? 'show' : '' ?>"
|
||||
id="submenu<?= $key0 ?>"
|
||||
data-parent-id="submenu<?= $key0 ?>">
|
||||
<?php foreach ($menuChildrenLevelOne as $key1 => $menuChild):
|
||||
$childActive = (explode('/', $menuChild['lienMenu'])[0] ?? '') == $activeLink;
|
||||
?>
|
||||
<a href="<?= $menuChild['lienMenu'] ?>"
|
||||
class="nav-link <?= $childActive ? 'active' : '' ?>"
|
||||
aria-current="<?= $childActive ? 'page' : 'false' ?>"
|
||||
data-label="<?= htmlspecialchars($menuChild['libeleMenu']) ?>">
|
||||
<?= $menuChild['libeleMenu'] ?>
|
||||
<?php if (count($menuChildrenLevelOne) > 0): ?>
|
||||
<a href="javascript:void(0)"
|
||||
class="nav-link <?= $shouldBeOpen ? 'active' : '' ?>"
|
||||
data-submenu-target="submenu<?= $key0 ?>"
|
||||
aria-expanded="<?= $shouldBeOpen ? 'true' : 'false' ?>"
|
||||
aria-controls="submenu<?= $key0 ?>"
|
||||
data-label="<?= htmlspecialchars($menuParent['libeleMenu']) ?>">
|
||||
<i class="<?= $menuParent['icone'] ?>"></i>
|
||||
<span class="nav-text"><?= $menuParent['libeleMenu'] ?></span>
|
||||
<i class="nav-arrow bi bi-chevron-right"></i>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<div class="nav-submenu collapse <?= $shouldBeOpen ? 'show' : '' ?>"
|
||||
id="submenu<?= $key0 ?>"
|
||||
data-bs-parent=".nav-section">
|
||||
<?php foreach ($menuChildrenLevelOne as $key1 => $menuChild):
|
||||
$childActive = (explode('/', $menuChild['lienMenu'])[0] ?? '') == $activeLink;
|
||||
?>
|
||||
<a href="<?= $menuChild['lienMenu'] ?>"
|
||||
class="nav-link <?= $childActive ? 'active' : '' ?>"
|
||||
aria-current="<?= $childActive ? 'page' : 'false' ?>"
|
||||
data-label="<?= htmlspecialchars($menuChild['libeleMenu']) ?>">
|
||||
<?= $menuChild['libeleMenu'] ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<!-- Code pour "Accueil" (sans enfants) -->
|
||||
<a href="<?= $menuParent['lienMenu'] ?>"
|
||||
class="nav-link <?= ((explode('/', $menuParent['lienMenu'])[0] ?? '') == $activeLink) ? 'active' : '' ?>"
|
||||
data-label="<?= htmlspecialchars($menuParent['libeleMenu']) ?>">
|
||||
<i class="<?= $menuParent['icone'] ?>"></i>
|
||||
<span class="nav-text"><?= $menuParent['libeleMenu'] ?></span>
|
||||
</a>
|
||||
<a href="<?= $menuParent['lienMenu'] ?>"
|
||||
class="nav-link <?= ((explode('/', $menuParent['lienMenu'])[0] ?? '') == $activeLink) ? 'active' : '' ?>"
|
||||
data-label="<?= htmlspecialchars($menuParent['libeleMenu']) ?>">
|
||||
<i class="<?= $menuParent['icone'] ?>"></i>
|
||||
<span class="nav-text"><?= $menuParent['libeleMenu'] ?></span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -758,25 +751,65 @@ $photoAssureCrypte = $_SESSION['photoAssureCrypte'];
|
|||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const toggleBtn = document.querySelector(".toggle-sidebar-btn");
|
||||
// 1. Gestion des clics sur les menus parents
|
||||
document.querySelectorAll('[data-submenu-target]').forEach(link => {
|
||||
link.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = this.getAttribute('data-submenu-target');
|
||||
const targetEl = document.getElementById(targetId);
|
||||
|
||||
if (!targetEl) return;
|
||||
|
||||
toggleBtn.addEventListener("click", function () {
|
||||
const isCollapsed = document.body.classList.toggle("sidebar-collapsed");
|
||||
// Si la sidebar est réduite, on l'ouvre
|
||||
if (document.body.classList.contains("sidebar-collapsed")) {
|
||||
document.body.classList.remove("sidebar-collapsed");
|
||||
}
|
||||
|
||||
if (isCollapsed) {
|
||||
// Fermer tous les sous-menus ouverts
|
||||
document.querySelectorAll(".nav-submenu.show").forEach(submenu => {
|
||||
submenu.classList.remove("show");
|
||||
submenu.classList.add("collapse");
|
||||
submenu.setAttribute("aria-expanded", "false");
|
||||
// Utilisation de l'instance unique Bootstrap
|
||||
const instance = bootstrap.Collapse.getOrCreateInstance(targetEl, {
|
||||
parent: '.nav-section', // Permet de fermer les autres menus
|
||||
toggle: false
|
||||
});
|
||||
|
||||
// Retirer les classes "active" des liens parents
|
||||
document.querySelectorAll(".nav-link.active[data-bs-toggle='collapse']").forEach(link => {
|
||||
link.classList.remove("active");
|
||||
});
|
||||
}
|
||||
|
||||
instance.toggle();
|
||||
});
|
||||
});
|
||||
|
||||
// 2. Événements Bootstrap pour le style et les flèches
|
||||
document.querySelectorAll('.nav-submenu').forEach(submenu => {
|
||||
submenu.addEventListener('show.bs.collapse', function () {
|
||||
const btn = document.querySelector(`[data-submenu-target="${this.id}"]`);
|
||||
if (btn) {
|
||||
btn.classList.add('active');
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
|
||||
submenu.addEventListener('hide.bs.collapse', function () {
|
||||
const btn = document.querySelector(`[data-submenu-target="${this.id}"]`);
|
||||
if (btn) {
|
||||
btn.classList.remove('active');
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 3. Gestion du bouton de réduction de la sidebar
|
||||
const toggleSidebarBtn = document.querySelector(".toggle-sidebar-btn");
|
||||
if (toggleSidebarBtn) {
|
||||
toggleSidebarBtn.addEventListener("click", function () {
|
||||
const isCollapsed = document.body.classList.toggle("sidebar-collapsed");
|
||||
|
||||
if (isCollapsed) {
|
||||
// On ferme proprement tous les sous-menus ouverts
|
||||
document.querySelectorAll(".nav-submenu.show").forEach(openMenu => {
|
||||
const inst = bootstrap.Collapse.getInstance(openMenu);
|
||||
if (inst) inst.hide();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user