implémentation de la toc complete pour linear

assets/css/src/footer.css

@@ -12,12 +12,37 @@
   bottom: 0;
 }
 
+@media screen and (max-width: 640px) {
+  #main-footer ul {
+    bottom: 0;
+    display: flex;
+    justify-content: space-around;
+    border-top: 1px solid var(--color-primary);
+    background-color: var(--color-background);
+  }
+  #main-footer .open-nav-wrapper_toc{
+    margin-right: 50px;
+  }
+}
+@media screen and (min-width: 1100px) {
+  #main-footer .open-nav-wrapper_toc{
+    display: none !important;
+  }
+}
+
 #main-footer li:not(.open-nav-wrapper) {
   display: none;
 }
 
+#main-footer li{
+  flex: 1;
+}
+#main-footer li > *{
+  width:calc(100% - var(--unit--vertical) * 2);
+}
+
 #main-footer button.open-nav {
-  transform: translateY(-1px);
+  transform: translateY(-2px);
 }
 
 [data-template="home"] .title-wrapper button.open-nav {
@@ -26,20 +51,17 @@
 
 @media screen and (max-width: 640px) {
   #main-footer .open-nav {
-    box-sizing: border-box;
-    bottom: 0;
     display: flex;
-    justify-content: center;
-    width: 100%;
     outline: none;
-    border-top: 1px solid var(--color-primary);
     font-size: var(--font-size-m);
     background-color: var(--color-background);
-    padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
-    margin-bottom: env(safe-area-inset-bottom);
     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/header.css

@@ -82,6 +82,7 @@ article > h1 {
 
   display: flex;
   flex-direction: column;
+  gap: var(--unit--vertical);
 }
 
 [data-template="home"] .page-cover {

assets/css/src/toc.css

@@ -1,15 +1,47 @@
 
+.toc{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
 .page-cover .toc{
-    position: fixed;
-    display: block;
-    width: calc(var(--body-padding) - var(--unit--horizontal) * 2) ;
-    left: 0;
-    top: 15vw;
-    padding-inline: var(--unit--horizontal);
+    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*/
+}
+
+
+[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;
+}

assets/js/script.js

@@ -69,9 +69,13 @@ function toggleLogoState() {
 }
 function toggleFooterState() {
   if (scrollY > 90) {
-    document.querySelector(".open-nav-wrapper").classList.remove("hidden");
+    document.querySelectorAll(".open-nav-wrapper").forEach(element => {
+      element.classList.remove("hidden");
+    });
   } else {
-    document.querySelector(".open-nav-wrapper").classList.add("hidden");
+    document.querySelectorAll(".open-nav-wrapper").forEach(element => {
+      element.classList.add("hidden");
+    });
   }
 }
 
@@ -125,12 +129,16 @@ function subscribe(event) {
   }
 }
 
-const panelNav = document.querySelector(".panel");
+const panelsNav = document.querySelectorAll(".panel");
+const panelNavText = document.querySelector(".panel-text");
+const panelNavToc = document.querySelector(".panel-toc");
 const navOverlay = document.querySelector("#nav-overlay");
 const openNavBtns = document.querySelectorAll("button.open-nav");
-const closeNavBtn = document.querySelector(".panel-close");
+const closeNavBtns = document.querySelectorAll(".panel-close");
 function closeNav() {
-  panelNav.classList.remove("panel--visible");
+  panelsNav.forEach(element => {
+   element.classList.remove("panel--visible");
+  });
   navOverlay.classList.remove("nav-overlay--visible");
   document.body.classList.remove("no-scroll");
 }
@@ -194,15 +202,22 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 
   openNavBtns.forEach((openNavBtn) => {
-    openNavBtn.addEventListener("click", () => {
-      panelNav.classList.add("panel--visible");
+    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");
     });
   });
 
-  closeNavBtn.addEventListener("click", () => {
-    closeNav();
+  closeNavBtns.forEach(element => {
+    element.addEventListener("click", () => {
+      closeNav();
+    });
   });
   navOverlay.addEventListener("click", () => {
     closeNav();