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

feat(v13-bg): layout 1 ecran fixe + hamburger desktop hide + categorie Pro

Browse Source
This commit is contained in:
Jules Neny
2026-05-11 20:00:16 +02:00
parent e43ec60ecf
commit aa410ce7aa
8 changed files with 38 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/astro/ColJournal.astro
View File

@@ -34,6 +34,16 @@ const categories = [
], ],
hasSelector: false, hasSelector: false,
}, },
{
id: 'pro',
label: 'Pro',
color: '#0F172A',
hashtags: ['#building-public', '#pro'],
plateformes: [
{ id: 'linkedin', label: 'LinkedIn', url: 'https://www.linkedin.com/in/jules-neny/' },
],
hasSelector: false,
},
]; ];
--- ---
<div class="h-full flex flex-col p-4 pt-20 md:pt-6 gap-5"> <div class="h-full flex flex-col p-4 pt-20 md:pt-6 gap-5">
@@ -42,7 +52,7 @@ const categories = [
<details id="hashtags-accordion" class="border-t border-neutral-200 pt-4"> <details id="hashtags-accordion" class="border-t border-neutral-200 pt-4">
<summary class="font-semibold cursor-pointer select-none flex items-center justify-between"> <summary class="font-semibold cursor-pointer select-none flex items-center justify-between">
<span>Hashtags</span> <span>Hashtags</span>
<span class="text-xs text-neutral-400 font-normal">3 categories</span> <span class="text-xs text-neutral-400 font-normal">4 categories</span>
</summary> </summary>
<div class="mt-3 flex flex-wrap gap-2" id="category-badges"> <div class="mt-3 flex flex-wrap gap-2" id="category-badges">
@@ -126,7 +136,7 @@ const categories = [
const PLATFORM_KEY = 'tf-platform-filter'; const PLATFORM_KEY = 'tf-platform-filter';
// Active state : map categoryId -> boolean // Active state : map categoryId -> boolean
const activeCategories: Record<string, boolean> = { politique: true, art: true, outils: true }; const activeCategories: Record<string, boolean> = { politique: true, art: true, outils: true, pro: true };
// Platform filter : map categoryId -> platformId | null // Platform filter : map categoryId -> platformId | null
const platformFilters: Record<string, string | null> = { politique: null }; const platformFilters: Record<string, string | null> = { politique: null };
@@ -138,15 +148,18 @@ const categories = [
const politiqueHashtags = ['#politique', '#aep-politique']; const politiqueHashtags = ['#politique', '#aep-politique'];
const artHashtags = ['#peinture', '#art']; const artHashtags = ['#peinture', '#art'];
const outilsHashtags = ['#stack', '#building-public']; const outilsHashtags = ['#stack', '#building-public'];
const proHashtags = ['#building-public', '#pro'];
const allPolitique = politiqueHashtags.every(h => storedHashtags[h] !== false); const allPolitique = politiqueHashtags.every(h => storedHashtags[h] !== false);
const allArt = artHashtags.every(h => storedHashtags[h] !== false); const allArt = artHashtags.every(h => storedHashtags[h] !== false);
const allOutils = outilsHashtags.every(h => storedHashtags[h] !== false); const allOutils = outilsHashtags.every(h => storedHashtags[h] !== false);
const allPro = proHashtags.every(h => storedHashtags[h] !== false);
if (Object.keys(storedHashtags).length > 0) { if (Object.keys(storedHashtags).length > 0) {
activeCategories['politique'] = allPolitique; activeCategories['politique'] = allPolitique;
activeCategories['art'] = allArt; activeCategories['art'] = allArt;
activeCategories['outils'] = allOutils; activeCategories['outils'] = allOutils;
activeCategories['pro'] = allPro;
} }
} catch { /* mode prive */ } } catch { /* mode prive */ }
@@ -163,6 +176,7 @@ const categories = [
politique: ['#politique', '#aep-politique'], politique: ['#politique', '#aep-politique'],
art: ['#peinture', '#art'], art: ['#peinture', '#art'],
outils: ['#stack', '#building-public'], outils: ['#stack', '#building-public'],
pro: ['#building-public', '#pro'],
}; };
for (const [catId, tags] of Object.entries(catHashtags)) { for (const [catId, tags] of Object.entries(catHashtags)) {
const active = activeCategories[catId] ?? true; const active = activeCategories[catId] ?? true;

2
src/components/astro/HamburgerMenu.astro
View File

@@ -5,7 +5,7 @@
<button <button
id="hamburger-trigger" id="hamburger-trigger"
type="button" type="button"
class="fixed top-4 right-4 z-50 p-3 bg-white/95 border border-neutral-200 rounded-lg shadow-md hover:bg-white transition-colors md:top-6 md:right-6" class="fixed top-4 right-4 z-50 p-3 bg-white/95 border border-neutral-200 rounded-lg shadow-md hover:bg-white transition-colors md:hidden"
aria-label="Ouvrir le menu" aria-label="Ouvrir le menu"
aria-expanded="false" aria-expanded="false"
aria-controls="hamburger-drawer" aria-controls="hamburger-drawer"

14
src/layouts/BaseLayout.astro
View File

@@ -14,7 +14,7 @@ const {
} = Astro.props; } = Astro.props;
--- ---
<!doctype html> <!doctype html>
<html lang="fr"> <html lang="fr" class="h-screen">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
@@ -29,11 +29,15 @@ const {
<meta name="twitter:title" content={title} /> <meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} /> <meta name="twitter:description" content={description} />
</head> </head>
<body class="m-0 bg-white text-neutral-900 antialiased min-h-screen flex flex-col"> <body class="m-0 bg-white text-neutral-900 antialiased h-screen flex flex-col overflow-hidden">
<SiteHeader /> <div class="flex-shrink-0">
<div class="flex-1 flex flex-col min-h-0"> <SiteHeader />
</div>
<div class="flex-1 flex flex-col min-h-0 overflow-hidden">
<slot /> <slot />
</div> </div>
<Footer /> <div class="flex-shrink-0">
<Footer />
</div>
</body> </body>
</html> </html>

2
src/pages/a-propos.astro
View File

@@ -10,7 +10,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
> >
<HamburgerMenu /> <HamburgerMenu />
<main class="min-h-screen bg-white"> <main class="h-full overflow-y-auto bg-white">
<article class="max-w-2xl mx-auto px-6 py-16 md:py-24"> <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">
<header class="mb-10"> <header class="mb-10">

18
src/pages/index.astro
View File

@@ -15,18 +15,16 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
<MobileTabBar /> <MobileTabBar />
<PopupOnboarding /> <PopupOnboarding />
<!-- Desktop : grid 3 colonnes (header 64px deja consommes par SiteHeader, on prend le reste) --> <!-- Desktop : grid 3 colonnes V1.3-BG : prend toute la place du wrapper flex-1 du BaseLayout.
<div Header et footer sont fixes (flex-shrink-0), pas besoin de calc(100vh - X). -->
class="hidden md:grid md:grid-cols-[320px_1fr_320px] overflow-hidden" <div class="hidden md:grid md:grid-cols-[320px_1fr_320px] h-full overflow-hidden">
style="height: calc(100vh - 64px);" <aside class="border-r border-neutral-200 overflow-y-auto h-full"><ColJournal /></aside>
> <main class="overflow-hidden h-full"><ColCentre /></main>
<aside class="border-r border-neutral-200 overflow-y-auto"><ColJournal /></aside> <aside class="border-l border-neutral-200 overflow-y-auto h-full"><ColInsta /></aside>
<main class="overflow-hidden"><ColCentre /></main>
<aside class="border-l border-neutral-200 overflow-y-auto"><ColInsta /></aside>
</div> </div>
<!-- Mobile : SwipeContainer Vue island - header 48px + tabbar 44px = 92px reserves --> <!-- Mobile : SwipeContainer Vue island - tabbar 44px reserve dans la zone flex-1 -->
<div class="md:hidden overflow-hidden" style="height: calc(100dvh - 48px - 44px); margin-top: 44px;"> <div class="md:hidden h-full overflow-hidden" style="padding-top: 44px;">
<SwipeContainer client:load> <SwipeContainer client:load>
<ColJournal slot="left" /> <ColJournal slot="left" />
<ColCentre slot="center" /> <ColCentre slot="center" />

2
src/pages/manifeste.astro
View File

@@ -10,7 +10,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
> >
<HamburgerMenu /> <HamburgerMenu />
<main class="min-h-screen bg-white"> <main class="h-full overflow-y-auto bg-white">
<article class="max-w-2xl mx-auto px-6 py-16 md:py-24"> <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">
<!-- En-tete --> <!-- En-tete -->

2
src/pages/manifeste/commander.astro
View File

@@ -10,7 +10,7 @@ import HamburgerMenu from '../../components/astro/HamburgerMenu.astro';
> >
<HamburgerMenu /> <HamburgerMenu />
<main class="min-h-screen bg-white"> <main class="h-full overflow-y-auto bg-white">
<article class="max-w-xl mx-auto px-6 py-16 md:py-24"> <article class="max-w-xl mx-auto px-6 py-16 md:py-24">
<header class="mb-10"> <header class="mb-10">

2
src/pages/mentions-legales.astro
View File

@@ -10,7 +10,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
> >
<HamburgerMenu /> <HamburgerMenu />
<main class="min-h-screen bg-white"> <main class="h-full overflow-y-auto bg-white">
<article class="max-w-2xl mx-auto px-6 py-16 md:py-24"> <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">
<header class="mb-10"> <header class="mb-10">