Amélioration affichage définitions

barre_latérale/sidebar.html

@@ -140,6 +140,9 @@
       align-items: center;
     }
 
+    #mesLexiquesContainer h4 {
+    margin-bottom: 5px;
+    }
 
     /* Définition */
     #definitionContainer {
@@ -237,10 +240,6 @@
     
     <button id="chercherDef">Rechercher une définition</button>
     <div id="possible-definitions" style="display: none;">
-      <label style="font-size: small;">
-        <input type="checkbox" id="toggle-definitions">
-        Afficher toutes les définitions
-      </label>
     </div>
   </div>
 
@@ -251,8 +250,13 @@
   <!-- Définitions des lexiques de l'utilisateur -->
   <div id="mesLexiquesContainer">
     <h4>📚 Mes lexiques</h4>
+    <label style="font-size: small;">
+      <input type="checkbox" id="toggle-definitions">
+      Afficher toutes les définitions
+    </label>
     <ul id="mesLexiquesList"></ul>
   </div>
+  
 
   <div id="noLexiconDefinitionsContainer" style="display: none; color: #8d5c70;">
     <p>Aucune définition trouvée dans les lexiques.</p>

barre_latérale/sidebar.js

@@ -836,4 +836,21 @@ document.addEventListener("DOMContentLoaded", async () => {
   } else {
     console.error("❌ ERREUR : Bouton #chercherDef introuvable.");
   }
+
+  // Écouteur pour la case à cocher "toggle-definitions" ---
+  const toggleCheckbox = document.getElementById("toggle-definitions");
+  if (toggleCheckbox) {
+    toggleCheckbox.addEventListener("change", (event) => {
+      const showAll = event.target.checked;
+      // Sélectionner toutes les sections de définitions dans "mesLexiquesList"
+      const lexiconContents = document.querySelectorAll("#mesLexiquesList .lexicon-content");
+      lexiconContents.forEach(content => {
+        if (showAll) {
+          content.classList.remove("hidden");
+        } else {
+          content.classList.add("hidden");
+        }
+      });
+    });
+  }
 });