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: ''}"
>
  <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 "
      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() ?><span x-show="search.length > 0" x-text="` > 1`"></span></h3>
        <div 
          class="panel__toggle-icon" 
          x-text="year ? '-' : '+'"
        ></div>
      </button>
      <div
        class="panel-item-content"
        x-show="year"
        x-data="{edito: false}"
      >
        <div 
          class="panel-item-content__edito"
          :class="edito ? '' : 'short'"
        >
          <?= $year->edito() ?>
        </div>
        <button 
          :class="edito ? 'open' : 'close'"
          class="see-more toggle left" @click="edito = !edito"
        >Lire</button>
        <ul class="panel-item-content__texts">
          <?php foreach($year->children() as $article): ?>
            <?php snippet(
                'text-item',
                array('article' => $article)
            ) ?>
          <?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>