refactoring avec claude + ajout scroll-margin-top et désaffichage du panel au click sur les liens du toc

assets/css/src/article.css

@@ -30,11 +30,16 @@ article #main-content #chapo::after {
 article #main-content li:not(.text) {
   list-style-type: inherit;
 }
-
 article h3 {
+  scroll-margin-top: calc(var(--unit--vertical) * 1);
   margin-top: calc(3 * var(--unit--vertical));
   margin-bottom: calc(1 * var(--unit--vertical));
 }
+@media screen and (max-width: 640px) {
+  article h3 {
+    scroll-margin-top: calc(var(--unit--vertical) * 5);
+  }
+}
 
 article li, article ol{
   margin-left: var(--unit--horizontal);

assets/css/src/footer.css

@@ -20,12 +20,14 @@
     border-top: 1px solid var(--color-primary);
     background-color: var(--color-background);
   }
-  #main-footer .open-nav-wrapper_toc{
+  #main-footer .open-nav-wrapper:has([data-open-panel="toc"]) {
     margin-right: 50px;
   }
 }
+
 @media screen and (min-width: 1100px) {
-  #main-footer .open-nav-wrapper_toc{
+  /* On mobile > 1100px, le bouton sommaire n'est pas nécessaire car la TOC est visible */
+  #main-footer .open-nav-wrapper:has([data-open-panel="toc"]) {
     display: none !important;
   }
 }
@@ -52,16 +54,14 @@
 @media screen and (max-width: 640px) {
   #main-footer .open-nav {
     display: flex;
+    justify-content: center;
     outline: none;
     font-size: var(--font-size-m);
     background-color: var(--color-background);
     color: var(--color-primary);
     line-height: 1;
     padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
-  }    
-  [data-is_toc="false"] #main-footer .open-nav {
-    justify-content: center;
-  }    
+  }
 }
 
 @media screen and (min-width: 640px) {

assets/css/src/toc.css

@@ -1,47 +1,39 @@
-
-.toc{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-.page-cover .toc{
-    flex: 1;
-}
-@media (min-width: 1100px){
-    .page-cover .toc{
-        position: fixed;
-        width: calc(var(--body-padding) - var(--unit--horizontal) * 2) ;
-        left: 0;
-        top: 15vw;
-        padding-inline: var(--unit--horizontal);
-        padding-top: calc(var(--unit--vertical) / 2);
-    }
-}
-.page-cover .toc{
-    flex: 1;
-}
-.panel-toc .toc{
-    padding: var(--unit--vertical) var(--unit--horizontal);
-
-}
-.toc_label{
-    font-size: var(--font-size-m);
-    margin-bottom: calc(var(--unit--vertical) / 4); /*option 1*/
-}
-.toc ul{
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--unit--vertical) / 4); /*option 1*/
-}
-.toc li{
-    margin-left: 0;
-    /* text-indent: var(--unit--horizontal) hanging; */ /*option 2*/
-
-    /* list-style: square; */ /*option 3*/
+.toc {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-
-[data-is_toc="false"] .if_toc,
-[data-is_toc="false"] #main-footer li.if_toc{ /*obliger d'être si précis car si non pas la priorité*/
-    display: none !important;
+.page-cover .toc {
+  flex: 1;
+}
+
+@media (min-width: 1100px) {
+  .page-cover .toc {
+    position: fixed;
+    width: calc(var(--body-padding) - var(--unit--horizontal) * 2);
+    left: 0;
+    top: 15vw;
+    padding-inline: var(--unit--horizontal);
+    padding-top: calc(var(--unit--vertical) / 2);
+  }
+}
+
+.panel-toc .toc {
+  padding: var(--unit--vertical) var(--unit--horizontal);
+}
+
+.toc_label {
+  font-size: var(--font-size-m);
+  margin-bottom: calc(var(--unit--vertical) / 4);
+}
+
+.toc ul {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit--vertical) / 4);
+}
+
+.toc li {
+  margin-left: 0;
 }

assets/js/script.js

@@ -129,20 +129,24 @@ function subscribe(event) {
   }
 }
 
-const panelsNav = document.querySelectorAll(".panel");
-const panelNavText = document.querySelector(".panel-text");
-const panelNavToc = document.querySelector(".panel-toc");
+const panels = document.querySelectorAll(".panel[data-panel]");
 const navOverlay = document.querySelector("#nav-overlay");
-const openNavBtns = document.querySelectorAll("button.open-nav");
-const closeNavBtns = document.querySelectorAll(".panel-close");
-function closeNav() {
-  panelsNav.forEach(element => {
-   element.classList.remove("panel--visible");
-  });
+
+function closeAllPanels() {
+  panels.forEach(panel => panel.classList.remove("panel--visible"));
   navOverlay.classList.remove("nav-overlay--visible");
   document.body.classList.remove("no-scroll");
 }
 
+function openPanel(name) {
+  const panel = document.querySelector(`.panel[data-panel="${name}"]`);
+  if (panel) {
+    panel.classList.add("panel--visible");
+    navOverlay.classList.add("nav-overlay--visible");
+    document.body.classList.add("no-scroll");
+  }
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   ragadjust("h1, h2, h4, h5", ["all"]);
   window.window.scrollTo({
@@ -166,10 +170,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
   window.addEventListener("keyup", (event) => {
     if (event.key === "Escape") {
-      closeNav();
+      closeAllPanels();
     }
   });
-  document.querySelectorAll(".panel").forEach((panel) => {
+  panels.forEach((panel) => {
     panel.addEventListener("click", (event) => {
       event.stopPropagation();
     });
@@ -201,25 +205,20 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 
-  openNavBtns.forEach((openNavBtn) => {
-    openNavBtn.addEventListener("click", (event) => {
-      target = event.currentTarget;
-      if(target.classList.contains("open-nav_text")){
-        panelNavText.classList.add("panel--visible");
-      }else if(target.classList.contains("open-nav_toc")){
-        panelNavToc.classList.add("panel--visible");
-      }
-      navOverlay.classList.add("nav-overlay--visible");
-      document.body.classList.add("no-scroll");
+  document.querySelectorAll("[data-open-panel]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      openPanel(btn.dataset.openPanel);
     });
   });
 
-  closeNavBtns.forEach(element => {
-    element.addEventListener("click", () => {
-      closeNav();
-    });
+  document.querySelectorAll(".panel-close").forEach((btn) => {
+    btn.addEventListener("click", closeAllPanels);
   });
-  navOverlay.addEventListener("click", () => {
-    closeNav();
+
+  navOverlay.addEventListener("click", closeAllPanels);
+
+  // Fermer le panel TOC quand on clique sur un lien
+  document.querySelectorAll(".panel-toc .toc a").forEach((link) => {
+    link.addEventListener("click", closeAllPanels);
   });
 });