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

feat(v11-dg): mobile header page active + hamburger top-right + poignee carte-o + polish css

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules Neny
2026-05-11 15:14:48 +02:00
parent 1e1c56db2f
commit 79004573f1
7 changed files with 156 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/astro/ColCentre.astro
View File

@@ -6,9 +6,9 @@ import ChatbotV2 from '../vue/ChatbotV2.vue';
import IframeCarteAEP from './IframeCarteAEP.astro';
import ScrollArticles from './ScrollArticles.astro';
---
<div class="h-full grid grid-rows-2 gap-2 p-2">
<div id="col-centre-grid" class="h-full grid grid-rows-2 gap-2 p-2">
<!-- HAUT 50% : tabs Carte O / Chatbot -->
<section class="border border-neutral-200 rounded flex flex-col overflow-hidden bg-white">
<section id="col-centre-haut" class="border border-neutral-200 rounded flex flex-col overflow-hidden bg-white">
<nav role="tablist" aria-label="Vues centrales" class="flex border-b border-neutral-200 px-1 pt-1">
<button
type="button"
@@ -56,6 +56,16 @@ import ScrollArticles from './ScrollArticles.astro';
</div>
</section>
<!-- Poignee repli zone HAUT - mobile only -->
<button
id="col-centre-poignee"
type="button"
aria-label="Replier ou deployer la Carte O"
class="md:hidden flex items-center justify-center h-6 bg-neutral-100 border-y border-neutral-200 cursor-pointer w-full -mt-2 -mb-2 hover:bg-neutral-200 transition-colors"
>
<span class="block w-8 h-0.5 bg-neutral-400 rounded-full"></span>
</button>
<!-- BAS 50% : iframe carte AEP + scroll articles Substack (PC4) -->
<section class="border border-neutral-200 rounded overflow-y-auto bg-white">
<div class="h-full min-h-[60vh] md:min-h-[400px]">
@@ -66,6 +76,39 @@ import ScrollArticles from './ScrollArticles.astro';
</div>
<script>
// Poignee repli zone HAUT (mobile only, D.3)
const grid = document.getElementById('col-centre-grid');
const haut = document.getElementById('col-centre-haut');
const poignee = document.getElementById('col-centre-poignee');
const applyRepliState = (replie: boolean) => {
if (!grid || !haut) return;
if (replie) {
grid.classList.remove('grid-rows-2');
grid.style.gridTemplateRows = '0fr 1fr';
haut.style.overflow = 'hidden';
haut.style.minHeight = '0';
poignee?.setAttribute('aria-label', 'Deployer la Carte O');
} else {
grid.classList.add('grid-rows-2');
grid.style.gridTemplateRows = '';
haut.style.overflow = '';
haut.style.minHeight = '';
poignee?.setAttribute('aria-label', 'Replier la Carte O');
}
};
// Etat initial depuis sessionStorage
const savedRepli = sessionStorage.getItem('tf-haut-replie');
applyRepliState(savedRepli === 'true');
poignee?.addEventListener('click', () => {
const current = sessionStorage.getItem('tf-haut-replie') === 'true';
const next = !current;
sessionStorage.setItem('tf-haut-replie', String(next));
applyRepliState(next);
});
// Tabs toggle.
const tabs = document.querySelectorAll<HTMLButtonElement>('[data-tab]');
const panels = document.querySelectorAll<HTMLElement>('[data-tab-panel]');