From c159dccd60890d6b30393b8965508c4173db4bea Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Wed, 25 Feb 2026 09:26:26 +0000
Subject: [PATCH] fav

---
 Vue/includes/scripts-footer.php | 123 +++++++++++++++++++++++++++-----
 1 file changed, 107 insertions(+), 16 deletions(-)

diff --git a/Vue/includes/scripts-footer.php b/Vue/includes/scripts-footer.php
index 44501be1..0ff63f4c 100644
--- a/Vue/includes/scripts-footer.php
+++ b/Vue/includes/scripts-footer.php
@@ -119,14 +119,35 @@
       $('select.selectpicker').selectpicker('refresh');
     }
 
-    /* --- Sidebar toggle responsive --- */
-    $('.toggle-sidebar-btn').on('click', function () {
-      $('body').toggleClass('toggle-sidebar');
-      // Sur mobile, slide le sidebar
-      if ($(window).width() < 1200) {
-        $('#sidebar').toggleClass('sidebar-open');
-      }
-    });
+    /* --- Sidebar toggle ---
+     * On désactive le listener natif de main.js (Bootstrap template) en
+     * clonant le nœud DOM, ce qui supprime tous ses event listeners,
+     * puis on rebranche notre propre logique.
+     */
+    (function () {
+      var $btn = $('.toggle-sidebar-btn');
+      if (!$btn.length) return;
+
+      // Cloner pour vider les listeners attachés par main.js
+      var $clone = $btn.clone(false);
+      $btn.replaceWith($clone);
+
+      $clone.on('click', function () {
+        var isMobile = $(window).width() < 1200;
+
+        if (isMobile) {
+          // Mobile : slide complet via classe CSS
+          $('#sidebar').toggleClass('sidebar-mobile-open');
+        } else {
+          // Desktop : basculer entre plein / icônes seules
+          $('body').toggleClass('toggle-sidebar');
+          // Forcer la fermeture des sous-menus collapse ouverts
+          if ($('body').hasClass('toggle-sidebar')) {
+            $('#sidebar .nav-content.show').collapse('hide');
+          }
+        }
+      });
+    })();
 
     /* --- Highlight ligne active DataTable au clic --- */
     $(document).on('click', '.table tbody tr', function () {
@@ -149,22 +170,92 @@
   }); // end document.ready
 </script>
 
-<!-- Style additionnel pour la ligne sélectionnée dans les tables -->
+<!-- Styles sidebar toggle + ligne sélectionnée -->
 <style>
+  /* ── Ligne DataTable sélectionnée ── */
   .table tbody tr.row-selected > td {
     background: rgba(26, 107, 74, 0.08) !important;
     border-left: 3px solid var(--color-accent, #0abf7c);
   }
 
-  /* Sidebar toggle body class */
-  body.toggle-sidebar #sidebar { width: var(--sidebar-collapsed, 68px); }
+  /* ── Transitions fluides (doivent être déclarées ici, APRÈS le CSS du template,
+        pour ne pas être écrasées par Bootstrap/css/style.css) ── */
+  #sidebar {
+    transition: width 0.3s cubic-bezier(.4,0,.2,1),
+                transform 0.3s cubic-bezier(.4,0,.2,1) !important;
+    overflow: hidden !important;
+    will-change: width;
+  }
+  #main {
+    transition: margin-left 0.3s cubic-bezier(.4,0,.2,1) !important;
+    will-change: margin-left;
+  }
+
+  /* ── Mode réduit (icônes seules) — desktop ── */
+  body.toggle-sidebar #sidebar {
+    width: 68px !important;
+    min-width: 68px !important;
+  }
+  body.toggle-sidebar #main {
+    margin-left: 68px !important;
+  }
+  /* Masquer textes et chevrons */
   body.toggle-sidebar #sidebar .nav-link span,
   body.toggle-sidebar #sidebar .nav-link .bi-chevron-down,
-  body.toggle-sidebar #sidebar .sidebar-section-label { display: none; }
-  body.toggle-sidebar #main { margin-left: var(--sidebar-collapsed, 68px); }
-  body.toggle-sidebar #sidebar .nav-link { justify-content: center; padding: 10px; }
-  body.toggle-sidebar #sidebar .nav-link i:first-child { font-size: 1.2rem; width: auto; }
-  body.toggle-sidebar #sidebar .nav-content { display: none !important; }
+  body.toggle-sidebar #sidebar .sidebar-section-label {
+    opacity: 0;
+    width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block; /* garder dans le flux mais invisible — évite le reflow brutal */
+    transition: opacity 0.2s ease, width 0.2s ease;
+  }
+  body:not(.toggle-sidebar) #sidebar .nav-link span,
+  body:not(.toggle-sidebar) #sidebar .nav-link .bi-chevron-down {
+    opacity: 1;
+    width: auto;
+    transition: opacity 0.25s ease 0.05s, width 0.25s ease;
+  }
+  /* Centrer les icônes et agrandir légèrement */
+  body.toggle-sidebar #sidebar .nav-link {
+    justify-content: center !important;
+    padding: 11px 0 !important;
+  }
+  body.toggle-sidebar #sidebar .nav-link i:first-child {
+    font-size: 1.25rem !important;
+    width: auto !important;
+    margin: 0 !important;
+  }
+  /* Fermer les sous-menus */
+  body.toggle-sidebar #sidebar .nav-content {
+    display: none !important;
+  }
+  /* Tooltip natif au survol en mode réduit */
+  body.toggle-sidebar #sidebar .nav-link {
+    position: relative;
+  }
+
+  /* ── Mobile : slide depuis la gauche ── */
+  @media (max-width: 1199px) {
+    #sidebar {
+      transform: translateX(-100%);
+      width: var(--sidebar-width, 240px) !important;
+    }
+    #sidebar.sidebar-mobile-open {
+      transform: translateX(0);
+    }
+    /* Overlay semi-transparent derrière le sidebar mobile */
+    #sidebar.sidebar-mobile-open::after {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.35);
+      z-index: -1;
+    }
+    #main {
+      margin-left: 0 !important;
+    }
+  }
 </style>
 
 </body>