redesign nav panel years

assets/css/src/generic.css

@@ -66,6 +66,10 @@
   flex-direction: column;
 }
 
+.light {
+  opacity: var(--opacity-light);
+}
+
 /* ================= COLORS ================= */
 .color {
   color: var(--color);

assets/css/src/html.css

@@ -1,13 +1,13 @@
 body {
   position: relative;
   box-sizing: border-box;
-  padding: 0 var(--unit--horizontal);
   background-color: var(--color-background);
   color: var(--color-primary);
 }
 
 main {
   position: relative;
+  padding: 0 var(--unit--horizontal);
 }
 
 hr {

assets/css/src/nav.css

@@ -91,3 +91,36 @@
 .panel-close::after {
   content: "◀";
 }
+
+/* ================= YEARS ================= */
+.year__toggle {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--unit--vertical);
+}
+
+.year__toggle-icon {
+  color: var(--color-secondary);
+  font-size: var(--font-size-xl);
+}
+
+.year__edito {
+  margin-bottom: calc(var(--unit--vertical) / 2);
+}
+
+.year__edito.short {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+}
+
+.year__texts {
+  margin-top: var(--unit--vertical);
+}
+
+/* ================= TEXT ITEM ================= */
+.text {
+  margin-bottom: var(--unit--vertical);
+}

assets/css/src/variables.css

@@ -22,6 +22,8 @@
   --font-weight-bold: 400;
   --font-weight-extra-bold: 550;
 
+  --opacity-light: 0.6;
+
   --curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
 

assets/js/script.js

@@ -2,12 +2,8 @@ const verticalUnit = getUnit("--unit--vertical");
 
 function getUnit(id) {
   const remFactor = 16;
-  const rawUnit = getComputedStyle(document.documentElement).getPropertyValue(
-    id
-  );
-  if (rawUnit.length === 0) {
-    throw new Error(`getUnit() error : css variable ${id} doesn't exists.`);
-  }
+  const rawUnit =
+    getComputedStyle(document.documentElement).getPropertyValue(id) || "1.7rem";
   const remUnit = parseFloat(rawUnit);
   const pxUnit = remUnit * remFactor;
   return pxUnit;
@@ -126,12 +122,9 @@ document.addEventListener("DOMContentLoaded", () => {
     top: 0,
   });
 
-  window.addEventListener(
-    "scroll",
-    throttle(() => {
-      toggleLogoState();
-    }, 10)
-  );
+  window.addEventListener("scroll", () => {
+    toggleLogoState();
+  });
 
   setWindowHeightFactor();
 

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