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:
parent
798123a60a
commit
6c1a8c8850
16 changed files with 103 additions and 115 deletions
31
site/snippets/side-panel.php
Normal file
31
site/snippets/side-panel.php
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue