actuel-inactuel/site/snippets/nav.php

<div id="entry-btns">
  <button
    class="entry-btn entry-btn--left"
    onclick="togglePanel('left')"
  >années</button>
  <button
    class="entry-btn entry-btn--right"
    onclick="togglePanel('right')"
  >categories</button>
</div>

<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='{ year: false }'
    >
      <button 
        class="panel__toggle-btn"
        :class="year ? '' : 'short'"
        @click="year = !year" 
      >
        <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
        <div 
          class="panel__toggle-icon" 
          x-text="year || search.length > 0 ? '-' : '+'"
        ></div>
      </button>
      <div
        class="panel-item-content"
        x-show="year || 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() 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="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>
    </li>
    <?php endforeach ?>
  </ul>
  
  <button 
    onclick="togglePanel('left')" 
    class="panel-close"
  >fermer</button>
</nav>

<nav class="panel panel--right">
  <ul>
    <?php foreach($kirby->collection('categories') as $category): ?>
    <li 
      class="panel__item"
      x-data='{ category: false }'
      x-show="<?= count($category['texts']) ?> > 0"
    >
      <button 
        class="panel__toggle-btn"
        :class="category ? '' : 'short'"
        @click="category = !category" 
      >
        <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $category['title'] ?></h3>
        <div 
          class="panel__toggle-icon" 
          x-text="category ? '-' : '+'"
        ></div>
      </button>
      <div
        class="panel-item-content"
        x-show="category"
      >
        <ul class="panel-item-content__texts">
          <?php foreach($category['texts'] as $article): ?>
            <?php snippet(
                'text-item',
                array('article' => $article)
            ) ?>
          <?php endforeach ?>
        </ul>
      </div>
    </li>
    <?php endforeach ?>
  </ul>
  
  <button 
    onclick="togglePanel('right')" 
    class="panel-close"
  >fermer</button>
</nav>