side-panel : refactor nav + toc into single side-panel with view switching

Rename nav.php to side-panel.php to host both navigation and table of contents
views. The panel uses data-view attributes to switch between nav and toc content.
Footer buttons updated to target the unified panel. TOC button now visible on desktop.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-28 09:28:47 +01:00
parent 798123a60a
commit 6c1a8c8850
16 changed files with 103 additions and 115 deletions

View file

@ -8,9 +8,6 @@ $isOpen ??= false;
<?= $slots->title() ?>
</a>
</div>
<?php if ($page->hasToc()): ?>
<?php snippet('toc') ?>
<?php endif ?>
<?php if ($slots->text()): ?>
<div class="text-wrapper">
<?= $slots->text() ?>

View file

@ -1,15 +1,14 @@
<?php if (!$page->is(page('lettre')) && !$page->is(page('a-propos'))): ?>
<footer id="main-footer">
<ul id="links">
<li class="open-nav-wrapper hidden">
<button class="plus open-nav" data-open-panel="text" title="chercher parmi les textes">textes</button>
</li>
<?php if ($page->hasToc()): ?>
<li class="open-nav-wrapper hidden">
<button class="plus open-nav" data-open-panel="toc" title="ouvrir le table des matières">table des
matières</button>
</li>
<li class="footer-btn-wrapper hidden">
<button class="plus" data-open-panel="side-panel" data-view="toc" title="ouvrir la table des matières">sommaire</button>
</li>
<?php endif ?>
<li class="footer-btn-wrapper hidden">
<button class="plus" data-open-panel="side-panel" data-view="nav" title="chercher parmi les textes">textes</button>
</li>
<li>
<a href="/lettre" id="subscribe-btn" class="plus">
s'inscrire

View file

@ -100,8 +100,5 @@ $entryTopPos ??= 20;
</h1>
</a>
</header>
<?php snippet('nav') ?>
<?php if ($page->hasToc()): ?>
<?php snippet('panel-toc') ?>
<?php endif ?>
<?php snippet('side-panel') ?>
<div id="nav-overlay"></div>

View file

@ -1,22 +0,0 @@
<nav class="panel panel-text" data-panel="text" x-data="{search: ''}">
<header>
<p class="sort-btns">
<button class="sort-btn sort-btn--years active">années</span></button>
<button class="sort-btn sort-btn--categories">catégories</button>
<button class="sort-btn sort-btn--all">voir tout</button>
</p>
<div class="search">
<input class="search__input" type="text" placeholder="Chercher" x-model="search">
<div class="search__icon"></div>
<button x-show="search.length > 0" @click="search = ''" class="search__icon">
<img
src="<?= url('assets/images/icons/close.svg') ?>"
alt="">
</button>
</div>
</header>
<?php snippet('nav__texts--all') ?>
<?php snippet('nav__texts--collection', ['collection' => 'categories']) ?>
<?php snippet('nav__texts--collection', ['collection' => 'years']) ?>
<button class="less panel-close">textes</button>
</nav>

View file

@ -1,4 +0,0 @@
<div class="panel panel-toc" data-panel="toc">
<?php snippet('toc') ?>
<button class="less panel-close">table des matières</button>
</div>

View file

@ -0,0 +1,31 @@
<div class="side-panel panel" data-panel="side-panel">
<div class="side-panel__view" data-view="nav" x-data="{search: ''}">
<header>
<p class="sort-btns">
<button class="sort-btn sort-btn--years active">années</span></button>
<button class="sort-btn sort-btn--categories">catégories</button>
<button class="sort-btn sort-btn--all">voir tout</button>
</p>
<div class="search">
<input class="search__input" type="text" placeholder="Chercher" x-model="search">
<div class="search__icon"></div>
<button x-show="search.length > 0" @click="search = ''" class="search__icon">
<img
src="<?= url('assets/images/icons/close.svg') ?>"
alt="">
</button>
</div>
</header>
<?php snippet('nav__texts--all') ?>
<?php snippet('nav__texts--collection', ['collection' => 'categories']) ?>
<?php snippet('nav__texts--collection', ['collection' => 'years']) ?>
</div>
<?php if ($page->hasToc()): ?>
<div class="side-panel__view hidden" data-view="toc">
<?php snippet('toc') ?>
</div>
<?php endif ?>
<button class="less panel-close">fermer</button>
</div>

View file

@ -1,5 +1,5 @@
<nav class="toc">
<div class="light toc_label">table des matières</div>
<div class="light toc_label">sommaire</div>
<ul>
<?php foreach ($page->tocItems() as $item): ?>
<li>

View file

@ -16,7 +16,7 @@
class="oggle-btn toggle-btn--left"
>éditorial</p>
</a>
<button class="plus open-nav" data-open-panel="text" title="ouvrir la navigation">textes</button>
<button class="plus" data-open-panel="side-panel" data-view="nav" title="ouvrir la navigation">textes</button>
<?php endslot() ?>
<?php endsnippet() ?>
<div id="main-edito" id="main-content">