feat: refonte mobile de la section Configurations #114

frontend/js/config.js

@@ -767,10 +767,15 @@ function initConfigModal() {
   openBtn.addEventListener("click", async () => {
     modal.classList.add("active");
     closeHeaderMenu();
-    // BUG-071: reset the TOC to the CSS default (mobile: hidden, desktop:
-    // visible) like the help modal does on open.
+    // BUG-071/#114: reset the TOC to the CSS default (mobile: hidden drawer,
+    // desktop: visible sidebar) like the help modal does on open. Clear the
+    // stale inline display and the drawer-open class so a previous mobile
+    // session cannot leave the nav stuck open.
     var configNavOnOpen = document.getElementById("config-nav");
     if (configNavOnOpen) configNavOnOpen.style.display = '';
+    modal.classList.remove("config-toc-open");
+    var configHamburgerOnOpen = document.getElementById("config-hamburger");
+    if (configHamburgerOnOpen) configHamburgerOnOpen.classList.remove("active");
     renderConfigFilters();
     loadConfigFields();
     loadDiagnostics();
@@ -786,6 +791,12 @@ function initConfigModal() {
   closeBtn.addEventListener("click", closeConfigModal);
   modal.addEventListener("click", (e) => {
     if (e.target === modal) {
+      // #114: a tap on the backdrop (or outside the drawer) first closes the
+      // TOC drawer; only a second tap closes the whole modal.
+      if (modal.classList.contains("config-toc-open")) {
+        _setConfigNav(false);
+        return;
+      }
       closeConfigModal();
     }
   });
@@ -890,17 +901,19 @@ function initConfigModal() {
     });
   }
 
-  // BUG-071: mobile table of contents. #config-nav shares the .help-nav
+  // BUG-071/#114: mobile table of contents. #config-nav shares the .help-nav
   // rule that hides it below 768px, but — unlike the help modal — the config
   // modal had no toggle to reveal it, leaving mobile users with no way to
-  // reach a section. The header hamburger opens it as a top block; picking
-  // a section smooth-scrolls inside the modal and collapses it on mobile.
+  // reach a section. The header hamburger opens it as a left slide-over
+  // drawer (backdrop via .config-toc-open on the modal); picking a section
+  // smooth-scrolls inside the modal and collapses it on mobile.
   var configNav = document.getElementById("config-nav");
   var configHamburger = document.getElementById("config-hamburger");
   function _isConfigMobile() { return window.innerWidth <= 768; }
   function _setConfigNav(open) {
     if (!configNav) return;
     configNav.style.display = open ? "flex" : "none";
+    modal.classList.toggle("config-toc-open", !!open && _isConfigMobile());
     if (configHamburger) configHamburger.classList.toggle("active", !!open);
   }
   if (configHamburger) {
@@ -910,6 +923,14 @@ function initConfigModal() {
       _setConfigNav(hidden);
     });
   }
+  // #114: close button inside the drawer header.
+  var configTocClose = document.getElementById("config-toc-close");
+  if (configTocClose) {
+    configTocClose.addEventListener("click", function(e) {
+      e.stopPropagation();
+      _setConfigNav(false);
+    });
+  }
   if (configNav) {
     configNav.querySelectorAll(".help-nav-link").forEach(function(a) {
       a.addEventListener("click", function(e) {
@@ -930,6 +951,11 @@ function initConfigModal() {
 
   document.addEventListener("keydown", (e) => {
     if (e.key === "Escape" && modal.classList.contains("active")) {
+      // #114: Escape closes the TOC drawer first, then the modal.
+      if (modal.classList.contains("config-toc-open")) {
+        _setConfigNav(false);
+        return;
+      }
       closeConfigModal();
     }
   });
@@ -949,7 +975,13 @@ function initConfigModal() {
 
 function closeConfigModal() {
   const modal = document.getElementById("config-modal");
-  if (modal) modal.classList.remove("active");
+  if (modal) {
+    modal.classList.remove("active");
+    // #114: never leave the drawer-open class (backdrop) behind.
+    modal.classList.remove("config-toc-open");
+    const nav = document.getElementById("config-nav");
+    if (nav) nav.style.display = '';
+  }
 }
 
 // --- Config field helpers ---