add icon to search field

assets/css/src/html.css

@@ -30,6 +30,10 @@ nav hr {
   margin-left: 0;
 }
 
+input[type="text"]:focus-visible {
+  outline: none;
+}
+
 /* ================= SCROLLBAR ================= */
 body,
 html {

assets/css/src/nav.css

@@ -61,7 +61,28 @@
   overflow: auto;
 }
 
-.panel > ul {
+.search {
+  position: relative;
+}
+.search__input {
+  width: 100%;
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid #fff;
+  color: #fff;
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-light);
+  margin-bottom: var(--unit--vertical);
+}
+.search__icon {
+  position: absolute;
+  width: 1.1rem;
+  height: 1.1rem;
+  top: 0;
+  right: calc(var(--unit--horizontal) / 2);
+}
+
+.panel__result .panel__items {
   margin-bottom: calc(var(--unit--vertical) * 4);
 }
 

assets/images/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFF"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>

site/snippets/nav.php

@@ -10,8 +10,25 @@
   >categories</button>
 </div>
 
-<nav class="panel panel--left">
+<nav 
-  <ul>
+  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="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
-        <span class="opacity-light">dans</span> <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
+        <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>

site/templates/category.php

@@ -5,7 +5,7 @@
   <?php snippet('cover', slots: true) ?>
     <?php slot('title') ?>
       <h1 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
-      <p class="opacity-light">catégorie</p>
+      <p class="light">catégorie</p>
     <?php endslot() ?>
   <?php endsnippet() ?>
   <div 

site/templates/linear.php

@@ -5,7 +5,7 @@
       <?php slot('title') ?>
       <h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
       <p>
-        <span class="opacity-light">par </span>
+        <span class="light">par </span>
         <a 
           class="author" 
           href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>" 
@@ -13,8 +13,8 @@
         >
           <?= $page->author()->toUser()->name() ?>
         </a><br>
-        <span class="opacity-light">publié le </span><?= $page->published()->toDate('d/m/Y') ?> 
+        <span class="light">publié le </span><?= $page->published()->toDate('d/m/Y') ?> 
-        <span class="opacity-light">dans</span> <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
+        <span class="light">dans</span> <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
       </p>
       <?php endslot() ?>
     <?php endsnippet() ?>