astro-site-cerveau/src/pages/index.astro

---
export const prerender = true;

import BaseLayout from '../layouts/BaseLayout.astro';
import ColJournal from '../components/astro/ColJournal.astro';
import ColCentre from '../components/astro/ColCentre.astro';
import ColInsta from '../components/astro/ColInsta.astro';
import SwipeContainer from '../components/vue/SwipeContainer.vue';
import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
import MobileTabBar from '../components/astro/MobileTabBar.astro';
import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
---
<BaseLayout title="trans-former.fr">
  <HamburgerMenu />
  <MobileTabBar />
  <PopupOnboarding />

  <!-- 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).
       Re-clic = bidirectionnel : col reapparait, centre se retracte. sessionStorage persist.
       V1.4-bis FIX 2 : suppression du couplage display:none + width:0 (conflit grid).
       On utilise EXCLUSIVEMENT --col-left/--col-right (0px = aside disparait visuellement).
       Le contenu de l'aside est cache via visibility hidden (preserve la place 0 sans bug grid).
       Grid template utilise minmax(0,1fr) pour que la col centre ne s'effondre pas quand les
       voisins sont a 0 (cas critique 2 togglees). -->
  <div
    id="desktop-grid"
    class="hidden md:grid h-full overflow-hidden relative"
    style="grid-template-columns: var(--col-left, 320px) minmax(0, 1fr) var(--col-right, 320px);"
  >
    <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" style="min-width: 0;">
      <ColCentre />
      <!-- 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="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.
           Icone > quand col visible (clic = cacher) ; < quand col cachee (clic = rouvrir). -->
      <button
        type="button"
        id="toggle-col-right"
        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-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 -->
  <div class="md:hidden h-full overflow-hidden" style="padding-top: 44px;">
    <SwipeContainer client:load>
      <ColJournal slot="left" />
      <ColCentre slot="center" />
      <ColInsta slot="right" />
    </SwipeContainer>
  </div>

  <script>
    // 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';

    const grid = document.getElementById('desktop-grid') as HTMLElement | null;
    const asideLeft = document.getElementById('col-left-aside') as HTMLElement | null;
    const asideRight = document.getElementById('col-right-aside') as HTMLElement | null;
    const btnLeft = document.getElementById('toggle-col-left') as HTMLButtonElement | null;
    const btnRight = document.getElementById('toggle-col-right') as HTMLButtonElement | null;
    const iconLeft = document.getElementById('toggle-col-left-icon');
    const iconRight = document.getElementById('toggle-col-right-icon');

    let collapsedLeft = false;
    let collapsedRight = false;

    try {
      collapsedLeft = sessionStorage.getItem(KEY_LEFT) === '1';
      collapsedRight = sessionStorage.getItem(KEY_RIGHT) === '1';
    } catch { /* mode prive */ }

    // V1.4-bis FIX 2 : UNE SEULE technique (CSS var width 0px) — pas de display:none
    // qui creait un conflit grid : quand display:none + grid-column 0 cohabitent,
    // certains navigateurs ne recalculent pas la col centre correctement → centre disparu.
    // Maintenant : aside reste dans le flux avec width 0 (overflow hidden cache le contenu)
    // + le contenu interne avec visibility hidden pour ne pas etre focusable au tab.
    const apply = () => {
      if (!grid) return;
      grid.style.setProperty('--col-left', collapsedLeft ? '0px' : '320px');
      grid.style.setProperty('--col-right', collapsedRight ? '0px' : '320px');
      // Aside reste en flux (display: '' par defaut) pour ne pas casser le grid template.
      // Visibility hidden + tabindex -1 sur le contenu pour empecher interaction inutile.
      if (asideLeft) {
        asideLeft.style.visibility = collapsedLeft ? 'hidden' : '';
        asideLeft.setAttribute('aria-hidden', collapsedLeft ? 'true' : 'false');
      }
      if (asideRight) {
        asideRight.style.visibility = collapsedRight ? 'hidden' : '';
        asideRight.setAttribute('aria-hidden', collapsedRight ? 'true' : 'false');
      }
      // Icones : pointe vers la direction d'ouverture (sens depliage).
      if (iconLeft) iconLeft.innerHTML = collapsedLeft ? '&rsaquo;' : '&lsaquo;';
      if (iconRight) iconRight.innerHTML = collapsedRight ? '&lsaquo;' : '&rsaquo;';
    };

    apply();

    btnLeft?.addEventListener('click', () => {
      collapsedLeft = !collapsedLeft;
      try { sessionStorage.setItem(KEY_LEFT, collapsedLeft ? '1' : '0'); } catch { /* mode prive */ }
      apply();
    });

    btnRight?.addEventListener('click', () => {
      collapsedRight = !collapsedRight;
      try { sessionStorage.setItem(KEY_RIGHT, collapsedRight ? '1' : '0'); } catch { /* mode prive */ }
      apply();
    });
  </script>
</BaseLayout>