adapt categories panel from years panel

site/snippets/nav.php

@@ -71,7 +71,7 @@
           @click="edito = !edito"
         >Lire</button>
         <ul class="panel-item-content__texts">
-          <?php foreach($year->children() as $article): ?>
+          <?php foreach($year->children()->shuffle() as $article): ?>
             <li 
               class="text"
               x-data="{ 
@@ -112,13 +112,39 @@
   >fermer</button>
 </nav>
 
-<nav class="panel panel--right">
-  <ul>
-    <?php foreach($kirby->collection('categories') as $category): ?>
+<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"
+      class="panel__item "
       x-data='{ category: false }'
-      x-show="<?= count($category['texts']) ?> > 0"
     >
       <button 
         class="panel__toggle-btn"
@@ -128,19 +154,44 @@
         <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $category['title'] ?></h3>
         <div 
           class="panel__toggle-icon" 
-          x-text="category ? '-' : '+'"
+          x-text="category || search.length > 0 ? '-' : '+'"
         ></div>
       </button>
       <div
         class="panel-item-content"
-        x-show="category"
+        x-show="category || search.length > 0"
       >
         <ul class="panel-item-content__texts">
-          <?php foreach($category['texts'] as $article): ?>
-            <?php snippet(
-                'text-item',
-                array('article' => $article)
-            ) ?>
+          <?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="texts__title no-line">
+                <h3><?= $article->title() ?></h3>
+              </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>