From 53b72e85b9f56063e7856ee6b953f380fea778aa Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 9 Apr 2024 18:58:31 +0200
Subject: [PATCH] add clear search input button

---
 assets/css/src/nav.css        | 16 ++++++++++++----
 assets/images/icons/close.svg |  1 +
 site/snippets/nav.php         |  8 ++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 assets/images/icons/close.svg

diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css
index f807690..81fd546 100644
--- a/assets/css/src/nav.css
+++ b/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 {
diff --git a/assets/images/icons/close.svg b/assets/images/icons/close.svg
new file mode 100644
index 0000000..639cdf0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/site/snippets/nav.php b/site/snippets/nav.php
index f4ca0b3..aefeca4 100644
--- a/site/snippets/nav.php
+++ b/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): ?>