add clear search input button

assets/css/src/nav.css

@@ -70,8 +70,10 @@
   padding-top: calc(var(--unit--vertical) * 5);
 }
 .search__input {
+  all: unset;
   width: 100%;
   background-color: transparent;
+  padding: 0;
   padding-bottom: calc(var(--unit--vertical) / 4);
   border: none;
   border-bottom: 1px solid #fff;
@@ -84,11 +86,17 @@
   letter-spacing: 1px;
 }
 .search__icon {
+  all: unset;
   position: absolute;
-  width: 1.1rem;
-  height: 1.1rem;
-  bottom: calc(var(--unit--vertical) / 4);
-  right: calc(var(--unit--horizontal) / 2);
+  width: 1.2rem;
+  height: 1.2rem;
+  padding: 0.5rem;
+  bottom: 0;
+  right: calc(var(--unit--horizontal) / 6);
+  transform: translateX(0.5rem);
+}
+button.search__icon {
+  cursor: pointer;
 }
 
 .panel__items {

assets/images/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff"><path d="M10.5859 12L2.79297 4.20706L4.20718 2.79285L12.0001 10.5857L19.793 2.79285L21.2072 4.20706L13.4143 12L21.2072 19.7928L19.793 21.2071L12.0001 13.4142L4.20718 21.2071L2.79297 19.7928L10.5859 12Z"></path></svg>

site/snippets/nav.php

@@ -22,10 +22,18 @@
       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): ?>