add icon to search field

site/snippets/nav.php

@@ -10,8 +10,25 @@
   >categories</button>
 </div>
 
-<nav class="panel panel--left">
-  <ul>
+<nav 
+  class="panel panel--left"
+  x-data="{search: ''}"
+>
+  <span class="search">
+    <input 
+      class="search__input" 
+      type="text" 
+      placeholder="page, auteur, année etc." 
+      x-model="search"
+    >
+    <img 
+      src="<?= url('assets/images/icons/search.svg') ?>" 
+      class="search__icon"
+      alt="Icône loupe indiquant le champ de recherche."
+    >
+  </span>
+  <ul id="result"></ul>
+  <ul id="panel__items">
     <?php foreach($kirby->collection('years') as $year): ?>
     <li 
       class="panel__item "
@@ -22,7 +39,7 @@
         :class="year ? '' : 'short'"
         @click="year = !year" 
       >
-        <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
+        <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?><span x-show="search.length > 0" x-text="` > 1`"></span></h3>
         <div 
           class="panel__toggle-icon" 
           x-text="year ? '-' : '+'"

site/snippets/text-item.php

@@ -1,13 +1,15 @@
-<li class="text">
+<li 
+  class="text"
+>
   <a href="<?= $article->url() ?>" class="texts__title no-line">
     <h3><?= $article->title() ?></h3>
   </a>
   <div class="text__infos">
     <p>
-        <span class="opacity-light">par</span>
+        <span class="light">par</span>
         <a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
-        <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>
+        <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>