feat(v13-bg): layout 1 ecran fixe + hamburger desktop hide + categorie Pro
This commit is contained in:
Jules Neny
@@ -34,6 +34,16 @@ const categories = [
|
||||
],
|
||||
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">
|
||||
@@ -42,7 +52,7 @@ const categories = [
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<div class="mt-3 flex flex-wrap gap-2" id="category-badges">
|
||||
@@ -126,7 +136,7 @@ const categories = [
|
||||
const PLATFORM_KEY = 'tf-platform-filter';
|
||||
|
||||
// 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
|
||||
const platformFilters: Record<string, string | null> = { politique: null };
|
||||
@@ -138,15 +148,18 @@ const categories = [
|
||||
const politiqueHashtags = ['#politique', '#aep-politique'];
|
||||
const artHashtags = ['#peinture', '#art'];
|
||||
const outilsHashtags = ['#stack', '#building-public'];
|
||||
const proHashtags = ['#building-public', '#pro'];
|
||||
|
||||
const allPolitique = politiqueHashtags.every(h => storedHashtags[h] !== false);
|
||||
const allArt = artHashtags.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) {
|
||||
activeCategories['politique'] = allPolitique;
|
||||
activeCategories['art'] = allArt;
|
||||
activeCategories['outils'] = allOutils;
|
||||
activeCategories['pro'] = allPro;
|
||||
}
|
||||
} catch { /* mode prive */ }
|
||||
|
||||
@@ -163,6 +176,7 @@ const categories = [
|
||||
politique: ['#politique', '#aep-politique'],
|
||||
art: ['#peinture', '#art'],
|
||||
outils: ['#stack', '#building-public'],
|
||||
pro: ['#building-public', '#pro'],
|
||||
};
|
||||
for (const [catId, tags] of Object.entries(catHashtags)) {
|
||||
const active = activeCategories[catId] ?? true;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<button
|
||||
id="hamburger-trigger"
|
||||
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-expanded="false"
|
||||
aria-controls="hamburger-drawer"
|
||||
|
||||
@@ -14,7 +14,7 @@ const {
|
||||
} = Astro.props;
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<html lang="fr" class="h-screen">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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:description" content={description} />
|
||||
</head>
|
||||
<body class="m-0 bg-white text-neutral-900 antialiased min-h-screen flex flex-col">
|
||||
<SiteHeader />
|
||||
<div class="flex-1 flex flex-col min-h-0">
|
||||
<body class="m-0 bg-white text-neutral-900 antialiased h-screen flex flex-col overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<SiteHeader />
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col min-h-0 overflow-hidden">
|
||||
<slot />
|
||||
</div>
|
||||
<Footer />
|
||||
<div class="flex-shrink-0">
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -10,7 +10,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
|
||||
>
|
||||
<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">
|
||||
|
||||
<header class="mb-10">
|
||||
|
||||
@@ -15,18 +15,16 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
|
||||
<MobileTabBar />
|
||||
<PopupOnboarding />
|
||||
|
||||
<!-- Desktop : grid 3 colonnes (header 64px deja consommes par SiteHeader, on prend le reste) -->
|
||||
<div
|
||||
class="hidden md:grid md:grid-cols-[320px_1fr_320px] overflow-hidden"
|
||||
style="height: calc(100vh - 64px);"
|
||||
>
|
||||
<aside class="border-r border-neutral-200 overflow-y-auto"><ColJournal /></aside>
|
||||
<main class="overflow-hidden"><ColCentre /></main>
|
||||
<aside class="border-l border-neutral-200 overflow-y-auto"><ColInsta /></aside>
|
||||
<!-- Desktop : grid 3 colonnes V1.3-BG : prend toute la place du wrapper flex-1 du BaseLayout.
|
||||
Header et footer sont fixes (flex-shrink-0), pas besoin de calc(100vh - X). -->
|
||||
<div class="hidden md:grid md:grid-cols-[320px_1fr_320px] h-full overflow-hidden">
|
||||
<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-l border-neutral-200 overflow-y-auto h-full"><ColInsta /></aside>
|
||||
</div>
|
||||
|
||||
<!-- Mobile : SwipeContainer Vue island - header 48px + tabbar 44px = 92px reserves -->
|
||||
<div class="md:hidden overflow-hidden" style="height: calc(100dvh - 48px - 44px); margin-top: 44px;">
|
||||
<!-- 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" />
|
||||
|
||||
@@ -10,7 +10,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
|
||||
>
|
||||
<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">
|
||||
|
||||
<!-- En-tete -->
|
||||
|
||||
@@ -10,7 +10,7 @@ import HamburgerMenu from '../../components/astro/HamburgerMenu.astro';
|
||||
>
|
||||
<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">
|
||||
|
||||
<header class="mb-10">
|
||||
|
||||
@@ -10,7 +10,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
|
||||
>
|
||||
<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">
|
||||
|
||||
<header class="mb-10">
|
||||
|
||||
Reference in New Issue
Block a user