actuel-inactuel/site/snippets/panels.php

<nav 
  class="panel panel--left"
  x-data="{search: ''}"
>
  <div class="search">
    <input 
      class="search__input" 
      type="text" 
      placeholder="titre / auteur / année / catégorie" 
      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): ?>
    <li 
      class="panel__item "
      x-data='{ isOpen: false }'
    >
      <a class="no-line" href="#<?= $year->slug() ?>" id="<?= $year->slug() ?>">
        <button 
          class="panel__toggle-btn"
          :class="isOpen ? '' : 'short'"
          @click="isOpen = !isOpen" 
        >
          <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
          <div 
            class="panel__toggle-icon" 
            x-text="isOpen || search.length > 0 ? '-' : '+'"
          ></div>
        </button>
      </a>
      <div
        class="panel-item-content"
        x-show="isOpen || search.length > 0"
        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'"
          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()->shuffle() as $article): ?>
            <li 
              class="text"
              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="text__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>
    </li>
    <?php endforeach ?>
  </ul>
  
  <button 
    onclick="togglePanel('left')" 
    class="panel-close"
  >fermer</button>
</nav>

<nav 
  class="panel panel--right"
  x-data="{search: ''}"
>
  <div class="search">
    <input 
      class="search__input" 
      type="text" 
      placeholder="titre / auteur / année / catégorie" 
      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
      $categories = $kirby->collection('categories');
      shuffle($categories);
      foreach($categories as $category): ?>
    <li 
      class="panel__item "
      x-data='{ isOpen: false }'
    >
      <a class="no-line" href="#<?= $category['title'] ?>" id="<?= $category['title'] ?>">
        <button 
          class="panel__toggle-btn"
          :class="isOpen ? '' : 'short'"
          @click="isOpen = !isOpen" 
        >
          <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $category['title'] ?></h3>
          <div 
            class="panel__toggle-icon" 
            x-text="isOpen || search.length > 0 ? '-' : '+'"
          ></div>
        </button>
      </a>
      <div
        class="panel-item-content"
        x-show="isOpen || search.length > 0"
      >
        <ul class="panel-item-content__texts">
          <?php
          shuffle($category['texts']);
          foreach($category['texts'] as $article): ?>
            <li 
              class="text"
              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="text__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>
    </li>
    <?php endforeach ?>
  </ul>
  
  <button 
    onclick="togglePanel('right')" 
    class="panel-close"
  >fermer</button>
</nav>