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 ? '-' : '+'"