nav - don't show empty categories

assets/css/src/generic.css

@@ -6,17 +6,17 @@ body {
   background-size: var(--unit--horizontal) var(--unit--vertical);
   background-image: linear-gradient(
       to right,
-      var(--color-secondary--x-light) 1px,
+      var(--color-tertiary--x-light) 1px,
       transparent 1px
     ),
     linear-gradient(
       to bottom,
-      var(--color-secondary--light) 1px,
+      var(--color-tertiary--light) 1px,
       transparent 1px
     ),
     linear-gradient(
       to bottom,
-      var(--color-secondary--x-light) 1px,
+      var(--color-tertiary--x-light) 1px,
       transparent 1px
     );
   background-position: 0 0, 0 0, 0 calc(var(--unit--vertical) / 2);

assets/css/style.css

@@ -14,9 +14,16 @@
   --color-background: #000;
   --color-primary: #ffffff;
   --color-primary--transparent: rgba(255, 255, 255, 0.86);
-  --color-secondary: rgb(120, 171, 150, 0.86);
+
-  --color-secondary--light: rgb(119, 177, 157, 0.2);
+  --color-secondary-rgb: 120, 171, 150;
-  --color-secondary--x-light: rgb(119, 177, 157, 0.1);
+  --color-secondary: rgba(var(--color-secondary-rgb), 0.86);
+  --color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
+  --color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);
+
+  --color-tertiary-rgb: 253, 68, 26;
+  --color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
+  --color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
+  --color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1);
 
   --unit--horizontal: 5vw;
   --unit--vertical: 1.7rem;
@@ -41,13 +48,6 @@
 
 @media screen and (min-width: 640px) {
   :root {
-    --color-background: #000;
-    --color-primary: #ffffff;
-    --color-primary--transparent: rgba(255, 255, 255, 0.86);
-    --color-secondary: rgb(120, 171, 150, 0.86);
-    --color-secondary--light: rgb(119, 177, 157, 0.25);
-    --color-secondary--x-light: rgb(119, 177, 157, 0.15);
-
     --unit--horizontal: 2.5vw;
     --unit--vertical: 1.7rem;
 

site/collections/categories.php

@@ -1,27 +1,41 @@
 <?php
 
-return function ($site) {
+function createCategories($textsPage) {
-    $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()
         );
     }
+    return $categories;
+}
 
+function fillCategoriesWithTexts($emptyCategories, $texts) {
+    $filledCategories = $emptyCategories;
     foreach ($texts as $text) {
         try {
-            $categories[$text->category()->value()]['texts'][] = $text;
+            $textCategory = $text->category()->value();
+            $filledCategories[$textCategory]['texts'][] = $text;
         } catch (\Throwable $th) {
             throw new Exception(json_encode($th->getFile() . ' : ' . $th->getMessage()));
         }
     }
 
-    return $categories;
+    // exclude empty categories
+    return array_filter($filledCategories, function($category) {
+        return count($category['texts']) > 0;
+    });
+}
 
+return function ($site) {
+    $textsPage = $site->find('texts');
+    $years = $textsPage->children();
+    $texts = $years->children()->index();
+
+    $emptyCategories = createCategories($textsPage);
+
+    $filledCategories = fillCategoriesWithTexts($emptyCategories, $texts);
+
+    return $filledCategories;
 };

site/snippets/desktop-nav.php

@@ -0,0 +1,55 @@
+<?php
+  $firstCol = rand(0, 8);
+  $secondCol = rand(0, 8)
+?>
+
+<sidebar id="desktop-nav">
+  <ul>
+    <li 
+      class="left top" 
+      style="
+        --left: <?= e($page->fullWidth() != 'true', $firstCol, 0) ?>; 
+        --top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
+      "
+    >
+      <button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)">
+        années
+      </button>
+    </li>
+    <li 
+      class="left top" 
+      style="
+        --left: <?= e($page->fullWidth() != 'true', $secondCol, 0) ?>; 
+        --top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
+      "
+    >
+      <button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)">
+        catégories
+      </button>
+    </li>
+    <li class="empty
+    "></li>
+    <li 
+      class="left top" 
+      style="
+        --left: <?= e($page->fullWidth() != 'true', $firstCol, 0) ?>; 
+        --top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
+      "
+    >
+      <a href="#">
+        s'abonner
+      </a>
+    </li>
+    <li 
+      class="left top" 
+      style="
+        --left: <?= e($page->fullWidth() != 'true', $secondCol, 0) ?>; 
+        --top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
+      "
+    >
+      <a href="<?= $site->find('a-propos')->url() ?>">
+        à propos
+      </a>
+    </li>
+  </ul>
+</sidebar>

site/snippets/header.php

@@ -25,4 +25,4 @@ $entryTopPos = $entryTopPos ?? 20;
         </a>
       </div>
     </header>
-    <?php snippet('panels') ?>
+    <?php snippet('nav') ?>

site/snippets/nav.php

@@ -0,0 +1,17 @@
+<?php snippet('desktop-nav') ?>
+
+<?php snippet('panel--years') ?>
+  
+  <button 
+    onclick="togglePanel('years')" 
+    class="panel-close"
+  >fermer</button>
+</nav>
+
+<?php snippet('panel--categories') ?>
+  
+  <button 
+    onclick="togglePanel('categories')" 
+    class="panel-close"
+  >fermer</button>
+</nav>

site/snippets/panel--categories.php

@@ -0,0 +1,90 @@
+<nav 
+  class="panel panel--right"
+  x-data="{search: ''}"
+>
+  <div class="search">
+    <input 
+      class="search__input" 
+      type="text" 
+      placeholder="titre / auteur / année / catégorie" 
+      x-model="search"
+    >
+    <img 
+      x-show="search.length === 0"
+      src="<?= url('assets/images/icons/search.svg') ?>" 
+      class="search__icon"
+      alt="Icône loupe indiquant le champ de recherche."
+    >
+    <button 
+      x-show="search.length > 0"
+      @click="search = ''"
+      class="search__icon"
+    >
+      <img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
+    </button>
+  </div>
+  <ul class="panel__items">
+    <?php
+      $categories = $kirby->collection('categories');
+      shuffle($categories);
+      foreach($categories as $category): 
+    ?>
+    <li 
+      class="panel__item "
+      x-data='{ isOpen: false }'
+    >
+      <a class="no-line" href="#<?= $category['title'] ?>" id="<?= $category['title'] ?>">
+        <button 
+          class="panel__toggle-btn"
+          :class="isOpen ? '' : 'short'"
+          @click="isOpen = !isOpen" 
+        >
+          <h3><?= $category['title'] ?></h3>
+          <div 
+            class="panel__toggle-icon" 
+            x-text="isOpen || search.length > 0 ? '-' : '+'"
+          ></div>
+        </button>
+      </a>
+      <div
+        class="panel-item-content"
+        x-show="isOpen || search.length > 0"
+      >
+        <ul class="panel-item-content__texts">
+          <?php
+            shuffle($category['texts']);
+            foreach($category['texts'] as $article): 
+          ?>
+            <li 
+              class="text"
+              x-data="{ 
+                title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
+                author: '<?= $article->author()->toUser()->name() ?>',
+                yearParent: '<?= $article->parent()->title()->value() ?>',
+                category: '<?= $article->category() ?>',
+              }"
+              x-show="
+                title.toLowerCase().includes(search.toLowerCase()) 
+                || author.toLowerCase().includes(search.toLowerCase())
+                || yearParent.toLowerCase().includes(search.toLowerCase())
+                || category.toLowerCase().includes(search.toLowerCase())
+              "
+            >
+              <a href="<?= $article->url() ?>" class="text__title no-line">
+                <h4><?= $article->title() ?></h4>
+              </a>
+              <div class="text__infos">
+                <p>
+                    <span class="light">par</span>
+                    <a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
+                    <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
+                    <span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
+                </p>
+              </div>
+            </li>
+          <?php endforeach ?>
+        </ul>
+      </div>
+    </li>
+    <?php endforeach ?>
+  </ul>

site/snippets/panel--years.php

@@ -0,0 +1,97 @@
+<nav 
+  class="panel panel--left"
+  x-data="{search: ''}"
+>
+  <div class="search">
+    <input 
+      class="search__input" 
+      type="text" 
+      placeholder="titre / auteur / année / catégorie" 
+      x-model="search"
+    >
+    <img 
+      x-show="search.length === 0"
+      src="<?= url('assets/images/icons/search.svg') ?>" 
+      class="search__icon"
+      alt="Icône loupe indiquant le champ de recherche."
+    >
+    <button 
+      x-show="search.length > 0"
+      @click="search = ''"
+      class="search__icon"
+    >
+      <img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
+    </button>
+  </div>
+  <ul class="panel__items">
+    <?php foreach($kirby->collection('years') as $year): ?>
+    <li 
+      class="panel__item "
+      x-data='{ isOpen: false }'
+    >
+      <a class="no-line" href="#<?= $year->slug() ?>" id="<?= $year->slug() ?>">
+        <button 
+          class="panel__toggle-btn"
+          :class="isOpen ? '' : 'short'"
+          @click="isOpen = !isOpen" 
+        >
+          <h3><?= $year->title() ?></h3>
+          <div 
+            class="panel__toggle-icon" 
+            x-text="isOpen || search.length > 0 ? '-' : '+'"
+          ></div>
+        </button>
+      </a>
+      <div
+        class="panel-item-content"
+        x-show="isOpen || search.length > 0"
+        x-data='{ edito: false }'
+      >
+        <div 
+          class="panel-item-content__edito"
+          :class="edito ? '' : 'short'"
+          x-show="search.length === 0"
+        >
+          <?= $year->edito() ?>
+        </div>
+        <button 
+          :class="edito ? 'open' : 'close'"
+          x-show="search.length === 0"
+          class="see-more toggle-btn toggle-btn--left" 
+          @click="edito = !edito"
+        >Lire</button>
+        <ul class="panel-item-content__texts">
+          <?php foreach($year->children()->shuffle() as $article): ?>
+            <li 
+              class="text"
+              x-data="{ 
+                title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
+                author: '<?= $article->author()->toUser()->name() ?>',
+                yearParent: '<?= $article->parent()->title()->value() ?>',
+                category: '<?= $article->category() ?>',
+              }"
+              x-show="
+                title.toLowerCase().includes(search.toLowerCase()) 
+                || author.toLowerCase().includes(search.toLowerCase())
+                || yearParent.toLowerCase().includes(search.toLowerCase())
+                || category.toLowerCase().includes(search.toLowerCase())
+              "
+            >
+              <a href="<?= $article->url() ?>" class="text__title no-line">
+                <h4><?= $article->title() ?></h4>
+              </a>
+              <div class="text__infos">
+                <p>
+                    <span class="light">par</span>
+                    <a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
+                    <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
+                    <span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
+                </p>
+              </div>
+            </li>
+          <?php endforeach ?>
+        </ul>
+      </div>
+    </li>
+    <?php endforeach ?>
+  </ul>

site/snippets/panels.php

@@ -1,254 +0,0 @@
-<?php
-$firstCol = rand(0, 8);
-$secondCol = rand(0, 8)
-?>
-
-<sidebar id="desktop-nav">
-  <ul>
-    <li 
-      class="left top" 
-      style="
-        --left: <?= e($page->fullWidth() != 'true', $firstCol, 0) ?>; 
-        --top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
-      "
-    >
-      <button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)">
-        années
-      </button>
-    </li>
-    <li 
-      class="left top" 
-      style="
-        --left: <?= e($page->fullWidth() != 'true', $secondCol, 0) ?>; 
-        --top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
-      "
-    >
-      <button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)">
-        catégories
-      </button>
-    </li>
-    <li class="empty
-    "></li>
-    <li 
-      class="left top" 
-      style="
-        --left: <?= e($page->fullWidth() != 'true', $firstCol, 0) ?>; 
-        --top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
-      "
-    >
-      <a href="#">
-        s'abonner
-      </a>
-    </li>
-    <li 
-      class="left top" 
-      style="
-        --left: <?= e($page->fullWidth() != 'true', $secondCol, 0) ?>; 
-        --top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
-      "
-    >
-      <a href="<?= $site->find('a-propos')->url() ?>">
-        à propos
-      </a>
-    </li>
-  </ul>
-</sidebar>
-
-<nav 
-  class="panel panel--left"
-  x-data="{search: ''}"
->
-  <div class="search">
-    <input 
-      class="search__input" 
-      type="text" 
-      placeholder="titre / auteur / année / catégorie" 
-      x-model="search"
-    >
-    <img 
-      x-show="search.length === 0"
-      src="<?= url('assets/images/icons/search.svg') ?>" 
-      class="search__icon"
-      alt="Icône loupe indiquant le champ de recherche."
-    >
-    <button 
-      x-show="search.length > 0"
-      @click="search = ''"
-      class="search__icon"
-    >
-      <img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
-    </button>
-  </div>
-  <ul class="panel__items">
-    <?php foreach($kirby->collection('years') as $year): ?>
-    <li 
-      class="panel__item "
-      x-data='{ isOpen: false }'
-    >
-      <a class="no-line" href="#<?= $year->slug() ?>" id="<?= $year->slug() ?>">
-        <button 
-          class="panel__toggle-btn"
-          :class="isOpen ? '' : 'short'"
-          @click="isOpen = !isOpen" 
-        >
-          <h3><?= $year->title() ?></h3>
-          <div 
-            class="panel__toggle-icon" 
-            x-text="isOpen || search.length > 0 ? '-' : '+'"
-          ></div>
-        </button>
-      </a>
-      <div
-        class="panel-item-content"
-        x-show="isOpen || search.length > 0"
-        x-data='{ edito: false }'
-      >
-        <div 
-          class="panel-item-content__edito"
-          :class="edito ? '' : 'short'"
-          x-show="search.length === 0"
-        >
-          <?= $year->edito() ?>
-        </div>
-        <button 
-          :class="edito ? 'open' : 'close'"
-          x-show="search.length === 0"
-          class="see-more toggle-btn toggle-btn--left" 
-          @click="edito = !edito"
-        >Lire</button>
-        <ul class="panel-item-content__texts">
-          <?php foreach($year->children()->shuffle() as $article): ?>
-            <li 
-              class="text"
-              x-data="{ 
-                title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
-                author: '<?= $article->author()->toUser()->name() ?>',
-                yearParent: '<?= $article->parent()->title()->value() ?>',
-                category: '<?= $article->category() ?>',
-              }"
-              x-show="
-                title.toLowerCase().includes(search.toLowerCase()) 
-                || author.toLowerCase().includes(search.toLowerCase())
-                || yearParent.toLowerCase().includes(search.toLowerCase())
-                || category.toLowerCase().includes(search.toLowerCase())
-              "
-            >
-              <a href="<?= $article->url() ?>" class="text__title no-line">
-                <h4><?= $article->title() ?></h4>
-              </a>
-              <div class="text__infos">
-                <p>
-                    <span class="light">par</span>
-                    <a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
-                    <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
-                    <span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
-                </p>
-              </div>
-            </li>
-          <?php endforeach ?>
-        </ul>
-      </div>
-    </li>
-    <?php endforeach ?>
-  </ul>
-  
-  <button 
-    onclick="togglePanel('left')" 
-    class="panel-close"
-  >fermer</button>
-</nav>
-
-<nav 
-  class="panel panel--right"
-  x-data="{search: ''}"
->
-  <div class="search">
-    <input 
-      class="search__input" 
-      type="text" 
-      placeholder="titre / auteur / année / catégorie" 
-      x-model="search"
-    >
-    <img 
-      x-show="search.length === 0"
-      src="<?= url('assets/images/icons/search.svg') ?>" 
-      class="search__icon"
-      alt="Icône loupe indiquant le champ de recherche."
-    >
-    <button 
-      x-show="search.length > 0"
-      @click="search = ''"
-      class="search__icon"
-    >
-      <img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
-    </button>
-  </div>
-  <ul class="panel__items">
-    <?php
-      $categories = $kirby->collection('categories');
-shuffle($categories);
-foreach($categories as $category): ?>
-    <li 
-      class="panel__item "
-      x-data='{ isOpen: false }'
-    >
-      <a class="no-line" href="#<?= $category['title'] ?>" id="<?= $category['title'] ?>">
-        <button 
-          class="panel__toggle-btn"
-          :class="isOpen ? '' : 'short'"
-          @click="isOpen = !isOpen" 
-        >
-          <h3><?= $category['title'] ?></h3>
-          <div 
-            class="panel__toggle-icon" 
-            x-text="isOpen || search.length > 0 ? '-' : '+'"
-          ></div>
-        </button>
-      </a>
-      <div
-        class="panel-item-content"
-        x-show="isOpen || search.length > 0"
-      >
-        <ul class="panel-item-content__texts">
-          <?php
-    shuffle($category['texts']);
-    foreach($category['texts'] as $article): ?>
-            <li 
-              class="text"
-              x-data="{ 
-                title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
-                author: '<?= $article->author()->toUser()->name() ?>',
-                yearParent: '<?= $article->parent()->title()->value() ?>',
-                category: '<?= $article->category() ?>',
-              }"
-              x-show="
-                title.toLowerCase().includes(search.toLowerCase()) 
-                || author.toLowerCase().includes(search.toLowerCase())
-                || yearParent.toLowerCase().includes(search.toLowerCase())
-                || category.toLowerCase().includes(search.toLowerCase())
-              "
-            >
-              <a href="<?= $article->url() ?>" class="text__title no-line">
-                <h4><?= $article->title() ?></h4>
-              </a>
-              <div class="text__infos">
-                <p>
-                    <span class="light">par</span>
-                    <a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
-                    <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
-                    <span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
-                </p>
-              </div>
-            </li>
-          <?php endforeach ?>
-        </ul>
-      </div>
-    </li>
-    <?php endforeach ?>
-  </ul>
-  
-  <button 
-    onclick="togglePanel('right')" 
-    class="panel-close"
-  >fermer</button>
-</nav>