jules/astro-site-cerveau
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(v14-abf): toggle cols cacher seulement bidirectionnel + revert pastels transparent + footer align

Browse Source
This commit is contained in:
Jules Neny
2026-05-12 00:28:52 +02:00
parent b48b66bd76
commit bc7e394913
3 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+17 -11
View File
@@ -15,39 +15,43 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
<MobileTabBar />
<PopupOnboarding />
<!-- Desktop : grid 3 colonnes V1.3-F avec toggle replier latéraux.
Layout dynamique pilote par CSS vars --col-left / --col-right (320px par defaut, 0 quand replie).
Header et footer fixes (flex-shrink-0), pas de calc(100vh - X). -->
<!-- Desktop : grid 3 colonnes V1.4-A avec toggle CACHER latéraux (bidirectionnel).
Layout dynamique pilote par CSS vars --col-left / --col-right (320px visible, 0 cache).
Aside cache via display:none ET width 0 → centre s'elargit pour occuper la place.
Re-clic = bidirectionnel : col reapparait, centre se retracte. sessionStorage persist.
Pas de full-screen lateral : juste cacher pour focus simple. -->
<div
id="desktop-grid"
class="hidden md:grid h-full overflow-hidden relative"
style="grid-template-columns: var(--col-left, 320px) 1fr var(--col-right, 320px);"
>
<aside id="col-left-aside" class="border-r border-neutral-200 overflow-y-auto h-full"><ColJournal /></aside>
<aside id="col-left-aside" class="border-r border-neutral-200 overflow-hidden h-full"><div class="h-full overflow-y-auto"><ColJournal /></div></aside>
<main class="overflow-hidden h-full relative">
<ColCentre />
<!-- Toggle gauche : pose sur le bord gauche de la colonne centrale -->
<!-- Toggle gauche : pose sur le bord gauche de la colonne centrale.
Icone < quand col visible (clic = cacher) ; > quand col cachee (clic = rouvrir). -->
<button
type="button"
id="toggle-col-left"
aria-label="Replier/deplier colonne gauche"
aria-label="Cacher/afficher colonne gauche"
class="hidden md:flex absolute left-0 top-1/2 -translate-y-1/2 z-20 w-5 h-12 items-center justify-center bg-white border border-neutral-200 border-l-0 rounded-r text-neutral-500 hover:bg-neutral-50 hover:text-neutral-900 transition-colors cursor-pointer"
style="font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1;"
>
<span id="toggle-col-left-icon">&lsaquo;</span>
</button>
<!-- Toggle droite : pose sur le bord droit de la colonne centrale -->
<!-- Toggle droite : pose sur le bord droit de la colonne centrale.
Icone > quand col visible (clic = cacher) ; < quand col cachee (clic = rouvrir). -->
<button
type="button"
id="toggle-col-right"
aria-label="Replier/deplier colonne droite"
aria-label="Cacher/afficher colonne droite"
class="hidden md:flex absolute right-0 top-1/2 -translate-y-1/2 z-20 w-5 h-12 items-center justify-center bg-white border border-neutral-200 border-r-0 rounded-l text-neutral-500 hover:bg-neutral-50 hover:text-neutral-900 transition-colors cursor-pointer"
style="font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1;"
>
<span id="toggle-col-right-icon">&rsaquo;</span>
</button>
</main>
<aside id="col-right-aside" class="border-l border-neutral-200 overflow-y-auto h-full"><ColInsta /></aside>
<aside id="col-right-aside" class="border-l border-neutral-200 overflow-hidden h-full"><div class="h-full overflow-y-auto"><ColInsta /></div></aside>
</div>
<!-- Mobile : SwipeContainer Vue island - tabbar 44px reserve dans la zone flex-1 -->
@@ -60,8 +64,10 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
</div>
<script>
// V1.3-F : toggle replier/deplier colonnes laterales desktop.
// Etat persiste en sessionStorage. Quand replie : col = 0px, aside cache, ColCentre s'etend.
// V1.4-A : toggle CACHER colonnes laterales (bidirectionnel, focus simple).
// - Clic bouton gauche / droite -> cache la col concernee (width 0 + display:none).
// - Re-clic -> re-affiche. ColCentre s'elargit ou se retracte selon le grid recalcul.
// - Etat persiste en sessionStorage (survit aux refresh dans la meme tab).
const KEY_LEFT = 'tf-col-left-collapsed';
const KEY_RIGHT = 'tf-col-right-collapsed';