redesign nav panel years

site/snippets/footer.php

@@ -1,17 +1,17 @@
-<footer id="main-footer">
-  <ul id="links" class="| flex full-width" style="
-    --content: center;
-    --gap: 1;
-  ">
-    <li>
-      <a href="#">
-        à propos
-      </a>
-    </li>
-    <li>
-      <a href="#">s'abonner</a>
-    </li>
-  </ul>
-</footer>
-</body>
+    <footer id="main-footer">
+      <ul id="links" class="| flex full-width" style="
+        --content: center;
+        --gap: 1;
+      ">
+        <li>
+          <a href="#">
+            à propos
+          </a>
+        </li>
+        <li>
+          <a href="#">s'abonner</a>
+        </li>
+      </ul>
+    </footer>
+  </body>
 </html>

site/snippets/nav.php

@@ -12,40 +12,52 @@
 
 <nav class="panel panel--left">
   <ul 
-    x-show="activeTab === 'texts'">
+    class="years"
+  >
     <?php foreach($kirby->collection('years') as $year): ?>
+    <li 
+      class="year"
+      x-data='{ year: false }'
+    >
+      <button 
+        class="year__toggle"
+        :class="year ? '' : 'short'"
+        @click="year = !year" 
+      >
+        <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
         <div 
-          x-data='{
-            isOpen: false
-          }'
-          :class="isOpen ? '' : 'short'"
-          class="
-            texts__year 
-            | full-width 
-            flex column 
-            bottom"
-          style="
-            --content: center; 
-            --bottom: 2;"
+          class="year__toggle-icon" 
+          x-text="year ? '-' : '+'"
+        ></div>
+      </button>
+      <div
+        class="year__content"
+        x-show="year"
+        x-data="{edito: false}"
+      >
+        <div 
+          class="year__edito"
+          :class="edito ? '' : 'short'"
         >
-          <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
-          <div class="year__edito">
-            <?= $year->edito() ?>
-          </div>
-          <button 
-            :class="isOpen ? 'open' : 'close'"
-            class="see-more toggle left" @click="isOpen = !isOpen">Lire</button>
+          <?= $year->edito() ?>
         </div>
-      <?php foreach($year->children() as $article): ?>
-        <?php snippet(
-            'text-item',
-            array(
-                                              'article' => $article
-                                            )
-        ) ?>
-      <?php endforeach ?>
+        <button 
+          :class="edito ? 'open' : 'close'"
+          class="see-more toggle left" @click="edito = !edito"
+        >Lire</button>
+        <ul class="year__texts">
+          <?php foreach($year->children() as $article): ?>
+            <?php snippet(
+                'text-item',
+                array('article' => $article)
+            ) ?>
+          <?php endforeach ?>
+        </ul>
+      </div>
+    </li>
     <?php endforeach ?>
   </ul>
+  
   <button 
     onclick="togglePanel('left')" 
     class="panel-close">

site/snippets/text-item.php

@@ -1,13 +1,13 @@
-<li class="texts | bottom" style="--bottom:3">
+<li class="text">
   <a href="<?= $article->url() ?>" class="texts__title no-line">
     <h3><?= $article->title() ?></h3>
   </a>
-  <div class="texts__infos">
+  <div class="text__infos">
     <p>
-        <span class="opacity" style="--opacity:.5">par</span>
+        <span class="opacity-light">par</span>
         <a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
-        <span class="opacity" style="--opacity:.6">publié le </span><?= $article->published()->toDate('d/m/Y') ?> 
-        <span class="opacity" style="--opacity: .6">dans</span> <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
+        <span class="opacity-light">publié le </span><?= $article->published()->toDate('d/m/Y') ?> 
+        <span class="opacity-light">dans</span> <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
     </p>
   </div>
 </li>

site/templates/category.php

@@ -5,7 +5,7 @@
   <?php snippet('cover', slots: true) ?>
     <?php slot('title') ?>
       <h1 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
-      <p class="opacity" style="--opacity:.6">catégorie</p>
+      <p class="opacity-light">catégorie</p>
     <?php endslot() ?>
   <?php endsnippet() ?>
   <div 
@@ -45,7 +45,7 @@
           <ul>
           <?php foreach($year->children() as $article): ?>
             <?php if ($article->category() == $page->title()->value()) : ?>
-              <?php snippet('text-item', ['article' => $article]) ?>
+              <?php snippet('text-item', array('article' => $article)) ?>
             <?php endif ?>
           <?php endforeach ?>
           </ul>

site/templates/linear.php

@@ -1,11 +1,11 @@
 <?php snippet('header') ?>
 <main id="<?= $page->template() ?>">
   <article>
-    <?php snippet('cover', ['isOpen' => true], slots: true) ?>
+    <?php snippet('cover', array('isOpen' => true), slots: true) ?>
       <?php slot('title') ?>
       <h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
       <p>
-        <span class="opacity" style="--opacity:.6">par </span>
+        <span class="opacity-light">par </span>
         <a 
           class="author" 
           href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>" 
@@ -13,8 +13,8 @@
         >
           <?= $page->author()->toUser()->name() ?>
         </a><br>
-        <span class="opacity" style="--opacity:.6">publié le </span><?= $page->published()->toDate('d/m/Y') ?> 
-        <span class="opacity" style="--opacity: .6">dans</span> <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
+        <span class="opacity-light">publié le </span><?= $page->published()->toDate('d/m/Y') ?> 
+        <span class="opacity-light">dans</span> <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
       </p>
       <?php endslot() ?>
     <?php endsnippet() ?>