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();

site/snippets/cover.php

@@ -8,7 +8,7 @@ $isOpen ??= false;
       <?= $slots->title() ?>
     </a>
   </div>
-  <?php if ($page->parent()->parent()->is('textes')){
+  <?php if ($page->parent() && $page->parent()->parent()->is('textes')){
     snippet('toc', ["content" => $page->bodyBlocks()->toBlocks()]);
   } ?>
   <?php if ($slots->text()): ?>

site/snippets/footer.php

@@ -2,9 +2,14 @@
 <?php if (!$page->is(page('lettre')) && !$page->is(page('a-propos'))): ?>
   <footer id="main-footer">
     <ul id="links">
-      <li class="open-nav-wrapper hidden">
-        <button class="plus open-nav" title="chercher parmi les textes">textes</button>
+      <li class="open-nav-wrapper open-nav-wrapper_text hidden">
+        <button class="plus open-nav open-nav_text" title="chercher parmi les textes">textes</button>
       </li>
+      <?php if ($page->parent() && $page->parent()->parent()->is('textes')): ?>
+      <li class="open-nav-wrapper open-nav-wrapper_toc hidden if_toc">
+        <button class="plus open-nav open-nav_toc" title="ouvrir le sommaire">sommaire</button>
+      </li>
+      <?php endif ?>
       <li>
         <a href="/lettre" id="subscribe-btn" class="plus">
           s'inscrire

site/snippets/header.php

@@ -84,6 +84,13 @@ $entryTopPos ??= 20;
 
 <body
   class="background-grid <?= e($page->fullWidth() == 'true', 'full-width') ?>"
+  data-is_toc="<?php
+  if ($page->bodyBlocks() && $page->bodyBlocks()->isNotEmpty() && preg_match('/<h3>(.*?)<\/h3>/', $page->bodyBlocks())){
+    echo "true";
+  }else{
+    echo "false";
+  }
+  ?>"
   data-template="<?= $page->template() ?>">
   <button class="theme-toggler" data-theme-toggler>
     <span class="theme-toggler-icon"></span>
@@ -99,4 +106,9 @@ $entryTopPos ??= 20;
       </h1>
     </a>
   </header>
-  <?php snippet('nav') ?>
+  <?php snippet('nav') ?>
+  <?php if ($page->parent() && $page->parent()->parent()->is('textes')){
+    snippet('panel-toc');
+    }
+  ?>
+  <div id="nav-overlay"></div>

site/snippets/nav.php

@@ -1,4 +1,4 @@
-<nav class="panel" x-data="{search: ''}">
+<nav class="panel panel-text" x-data="{search: ''}">
   <header>
     <p class="sort-btns">
       <button class="sort-btn sort-btn--years active">années</span></button>
@@ -19,5 +19,4 @@
   <?php snippet('nav__texts--collection', ['collection' => 'categories']) ?>
   <?php snippet('nav__texts--collection', ['collection' => 'years']) ?>
   <button class="less panel-close">textes</button>
-</nav>
-<div id="nav-overlay"></div>
+</nav>

site/snippets/panel-toc.php

@@ -0,0 +1,6 @@
+<div class="panel panel-toc" x-data="{search: ''}">
+  <?php
+    snippet('toc', ["content" => $page->bodyBlocks()->toBlocks()]);
+  ?>
+  <button class="less panel-close">sommaire</button>
+</div>

site/snippets/toc.php

@@ -1,5 +1,5 @@
 <nav class="toc">
-    <div class="light toc_label">Sommaire</div>
+    <div class="light toc_label if_toc">Sommaire</div>
     <ul>
         <?php
         preg_match_all('/<h3>(.*?)<\/h3>/', $content, $titres);