search field working

assets/css/src/nav.css

@@ -62,27 +62,33 @@
 }
 
 .search {
-  position: relative;
+  position: fixed;
+  width: calc(100% - 2 * var(--unit--horizontal));
+  background-color: #000;
+  z-index: 1;
+  top: 0;
+  padding-top: calc(var(--unit--vertical) * 5);
 }
 .search__input {
   width: 100%;
   background-color: transparent;
+  padding-bottom: calc(var(--unit--vertical) / 4);
   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;
+  bottom: calc(var(--unit--vertical) / 4);
   right: calc(var(--unit--horizontal) / 2);
 }
 
-.panel__result .panel__items {
+.panel__items {
+  margin-top: calc(var(--unit--vertical) * 2);
   margin-bottom: calc(var(--unit--vertical) * 4);
 }
 

assets/js/script.js

@@ -121,8 +121,10 @@ function togglePanel(side) {
   const scrollY = window.scrollY || window.pageYOffset;
 
   if (isOpen) {
+    document.querySelector("html").style.overflowY = "hidden";
     document.querySelector("#main-header").classList.remove("minimized");
   } else if (scrollY > 10) {
+    document.querySelector("html").style.overflowY = "";
     document.querySelector("#main-header").classList.add("minimized");
   }
 }

site/snippets/nav.php

@@ -14,11 +14,11 @@
   class="panel panel--left"
   x-data="{search: ''}"
 >
-  <span class="search">
+  <div class="search">
     <input 
       class="search__input" 
       type="text" 
-      placeholder="page, auteur, année etc." 
+      placeholder="titre / auteur / année / catégorie" 
       x-model="search"
     >
     <img 
@@ -26,9 +26,8 @@
       class="search__icon"
       alt="Icône loupe indiquant le champ de recherche."
     >
-  </span>
+  </div>
-  <ul id="result"></ul>
+  <ul class="panel__items">
-  <ul id="panel__items">
     <?php foreach($kirby->collection('years') as $year): ?>
     <li 
       class="panel__item "
@@ -39,33 +38,59 @@
         :class="year ? '' : 'short'"
         @click="year = !year" 
       >
-        <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?><span x-show="search.length > 0" x-text="` > 1`"></span></h3>
+        <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
         <div 
           class="panel__toggle-icon" 
-          x-text="year ? '-' : '+'"
+          x-text="year || search.length > 0 ? '-' : '+'"
         ></div>
       </button>
       <div
         class="panel-item-content"
-        x-show="year"
+        x-show="year || search.length > 0"
-        x-data="{edito: false}"
+        x-data='{ edito: false }'
       >
         <div 
           class="panel-item-content__edito"
           :class="edito ? '' : 'short'"
+          x-show="search.length === 0"
         >
           <?= $year->edito() ?>
         </div>
         <button 
           :class="edito ? 'open' : 'close'"
-          class="see-more toggle left" @click="edito = !edito"
+          x-show="search.length === 0"
+          class="see-more toggle left" 
+          @click="edito = !edito"
         >Lire</button>
         <ul class="panel-item-content__texts">
           <?php foreach($year->children() as $article): ?>
-            <?php snippet(
+            <li 
-                'text-item',
+              class="text"
-                array('article' => $article)
+              x-data="{ 
-            ) ?>
+                title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
+                author: '<?= $article->author()->toUser()->name() ?>',
+                yearParent: '<?= $article->parent()->title()->value() ?>',
+                category: '<?= $article->category() ?>',
+              }"
+              x-show="
+                title.toLowerCase().includes(search.toLowerCase()) 
+                || author.toLowerCase().includes(search.toLowerCase())
+                || yearParent.toLowerCase().includes(search.toLowerCase())
+                || category.toLowerCase().includes(search.toLowerCase())
+              "
+            >
+              <a href="<?= $article->url() ?>" class="texts__title no-line">
+                <h3><?= $article->title() ?></h3>
+              </a>
+              <div class="text__infos">
+                <p>
+                    <span class="light">par</span>
+                    <a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
+                    <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>
           <?php endforeach ?>
         </ul>
       </div>