fill categories panel

assets/css/src/nav.css

@@ -1,7 +1,7 @@
 /* ================= ENTRIES BTNS ================= */
 #entry-btns {
   position: sticky;
-  top: calc(var(--unit--vertical) * 8);
+  top: calc(var(--unit--vertical) * 10);
   display: flex;
   justify-content: space-between;
   z-index: 2;
@@ -11,6 +11,9 @@
   transition: all 0.5s var(--curve-sine);
 }
 
+[data-template="home"] #entry-btns {
+  transform: translateY(calc(0rem - var(--unit--vertical-relative) * 8));
+}
 [data-template="linear"] #entry-btns {
   transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4));
 }
@@ -74,49 +77,44 @@
 
 .panel-close {
   position: fixed;
-  top: 0;
-  border: none;
+  justify-content: center;
+  width: calc(100% - 2 * var(--unit--horizontal));
+  bottom: 0;
   outline: none;
-  height: 100svh;
-  width: calc(var(--unit--horizontal) * 2);
-  font-size: 0.8rem;
-  display: flex;
+  border-top: 1px solid #fff;
+  font-size: var(--font-size-m);
+  background-color: #000;
+  padding: calc(var(--unit--vertical) / 2) 0;
+  margin-bottom: env(safe-area-inset-bottom);
 }
 
-.panel--left .panel-close {
-  right: 0;
-  justify-content: flex-end;
-}
+/* ================= LISTS ================= */
 
-.panel-close::after {
-  content: "◀";
-}
-
-/* ================= YEARS ================= */
-.year__toggle {
+.panel__toggle-btn {
   width: 100%;
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--unit--vertical);
 }
 
-.year__toggle-icon {
+.panel__toggle-icon {
   color: var(--color-secondary);
   font-size: var(--font-size-xl);
 }
 
-.year__edito {
+/* ================= YEARS ================= */
+.panel-item-content__edito {
   margin-bottom: calc(var(--unit--vertical) / 2);
 }
 
-.year__edito.short {
+.panel-item-content__edito.short {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5;
   overflow: hidden;
 }
 
-.year__texts {
+.panel-item-content__texts {
   margin-top: var(--unit--vertical);
 }
 

assets/js/script.js

@@ -91,7 +91,7 @@ function enableToggleEntriesVisibility() {
     });
   };
 
-  const top = verticalUnit * 6;
+  const top = verticalUnit * 8;
 
   const observer = new IntersectionObserver(toggleVisibility, {
     root: null,
@@ -114,7 +114,17 @@ function toggleLogoState() {
 
 function togglePanel(side) {
   document.querySelector(`.panel--${side}`).classList.toggle("open");
+  const isOpen = document
+    .querySelector(`.panel--${side}`)
+    .classList.contains("open");
+
+  const scrollY = window.scrollY || window.pageYOffset;
+
+  if (isOpen) {
     document.querySelector("#main-header").classList.remove("minimized");
+  } else if (scrollY > 10) {
+    document.querySelector("#main-header").classList.add("minimized");
+  }
 }
 
 document.addEventListener("DOMContentLoaded", () => {

site/collections/categories.php

@@ -0,0 +1,27 @@
+<?php
+
+return function ($site) {
+    $textsPage = $site->find('texts');
+    $years = $textsPage->children();
+    $texts = $years->children()->index();
+
+    $categories = array();
+
+    foreach ($textsPage->categories()->split() as $category) {
+        $categories[$category] = array(
+          'title' => $category,
+          'texts' => array()
+        );
+    }
+
+    foreach ($texts as $text) {
+        try {
+            $categories[$text->category()->value()]['texts'][] = $text;
+        } catch (\Throwable $th) {
+            throw new Exception(json_encode($th->getFile() . ' : ' . $th->getMessage()));
+        }
+    }
+
+    return $categories;
+
+};

site/snippets/nav.php

@@ -11,32 +11,30 @@
 </div>
 
 <nav class="panel panel--left">
-  <ul 
-    class="years"
-  >
+  <ul>
     <?php foreach($kirby->collection('years') as $year): ?>
     <li 
-      class="year"
+      class="panel__item "
       x-data='{ year: false }'
     >
       <button 
-        class="year__toggle"
+        class="panel__toggle-btn"
         :class="year ? '' : 'short'"
         @click="year = !year" 
       >
         <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
         <div 
-          class="year__toggle-icon" 
+          class="panel__toggle-icon" 
           x-text="year ? '-' : '+'"
         ></div>
       </button>
       <div
-        class="year__content"
+        class="panel-item-content"
         x-show="year"
         x-data="{edito: false}"
       >
         <div 
-          class="year__edito"
+          class="panel-item-content__edito"
           :class="edito ? '' : 'short'"
         >
           <?= $year->edito() ?>
@@ -45,7 +43,7 @@
           :class="edito ? 'open' : 'close'"
           class="see-more toggle left" @click="edito = !edito"
         >Lire</button>
-        <ul class="year__texts">
+        <ul class="panel-item-content__texts">
           <?php foreach($year->children() as $article): ?>
             <?php snippet(
                 'text-item',
@@ -60,11 +58,47 @@
   
   <button 
     onclick="togglePanel('left')" 
-    class="panel-close">
-  </button>
+    class="panel-close"
+  >fermer</button>
 </nav>
 
+<nav class="panel panel--right">
+  <ul>
+    <?php foreach($kirby->collection('categories') as $category): ?>
+    <li 
+      class="panel__item"
+      x-data='{ category: false }'
+    >
+      <button 
+        class="panel__toggle-btn"
+        :class="category ? '' : 'short'"
+        @click="category = !category" 
+      >
+        <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $category['title'] ?></h3>
+        <div 
+          class="panel__toggle-icon" 
+          x-text="category ? '-' : '+'"
+        ></div>
+      </button>
+      <div
+        class="panel-item-content"
+        x-show="category"
+      >
+        <ul class="panel-item-content__texts">
+          <?php foreach($category['texts'] as $article): ?>
+            <?php snippet(
+                'text-item',
+                array('article' => $article)
+            ) ?>
+          <?php endforeach ?>
+        </ul>
+      </div>
+    </li>
+    <?php endforeach ?>
+  </ul>
   
-<nav 
+  <button 
     onclick="togglePanel('right')" 
-  class="panel panel--right"></nav>
+    class="panel-close"
+  >fermer</button>
+</nav>

site/templates/home.php

@@ -8,15 +8,7 @@
       et des techniques<br>
     </h2>
     <?php endslot() ?>
-    
-    <?php slot('tabs') ?>
-      <?php snippet('tabs', [
-        'left' => [
-          'label' => 'édito',
-          'content' => $site->edito()
-        ]
-      ]) ?>
-    <?php endslot() ?>
   <?php endsnippet() ?>
+  <?php snippet('nav') ?>
 </main>
 <?php snippet('footer') ?>