From c8bf6534e0719c367981e80b36d2f87e2661944e Mon Sep 17 00:00:00 2001 From: Johan LEROY Date: Tue, 4 Aug 2026 15:43:59 +0200 Subject: [PATCH] =?UTF-8?q?fix(site):=20barre=20de=20navigation=20lisible?= =?UTF-8?q?=20=C3=A0=20toutes=20les=20largeurs,=20et=20bouton=20de=20remon?= =?UTF-8?q?t=C3=A9e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Les huit liens de la barre ne tiennent qu'au-delà de ~1180px. En dessous, la barre flex les compressait au lieu de les masquer : « Start project », « Git services » et « How it works » se cassaient sur deux ou trois lignes, les libellés recouvraient le logo et le bouton Gitea sortait du cadre. Sous 900px, il n'y avait par ailleurs AUCUNE navigation : les sections n'étaient atteignables qu'en scrollant. - Aucun libellé ne peut plus se casser (`whitespace-nowrap` + `shrink-0`), et le logo ne se rogne plus. - Les liens apparaissent par palier de largeur : 4 dès 900px, 6 à partir de 1024, les 8 à partir de 1180. Pur CSS, aucun JS, aucune mesure au runtime. - Sous 900px, un bouton menu ouvre un panneau listant TOUS les liens (plus Gitea), refermé au choix d'un lien ou par Échap. Le bouton Gitea quitte la barre à ces largeurs, sinon le bouton menu se retrouvait tronqué au bord de l'écran sur un mobile de 390px. - Le libellé « Gitea » n'apparaît qu'au-delà de 1180px ; en dessous l'icône suffit et l'aria-label reste. Ajout d'un bouton « remonter en haut » en bas à droite : mêmes tokens que le reste du site, visible seulement après 600px de défilement, cible de 44px, respecte prefers-reduced-motion. Vérifié au rendu à 390, 760, 900, 1024, 1180 et 1440px, dans les deux thèmes, menu ouvert compris. --- packages/site/src/App.vue | 2 + packages/site/src/components/AppHeader.vue | 117 +++++++++++++++++---- packages/site/src/components/BackToTop.vue | 65 ++++++++++++ packages/site/src/i18n/en.ts | 2 + packages/site/src/i18n/fr.ts | 2 + packages/site/src/lib/theme.ts | 6 +- 6 files changed, 172 insertions(+), 22 deletions(-) create mode 100644 packages/site/src/components/BackToTop.vue diff --git a/packages/site/src/App.vue b/packages/site/src/App.vue index afb7588..b4baedd 100644 --- a/packages/site/src/App.vue +++ b/packages/site/src/App.vue @@ -17,6 +17,7 @@ import SecuritySection from './components/SecuritySection.vue'; import FaqSection from './components/FaqSection.vue'; import FinalCta from './components/FinalCta.vue'; import AppFooter from './components/AppFooter.vue'; +import BackToTop from './components/BackToTop.vue'; const { locale } = useI18n(); @@ -82,5 +83,6 @@ const glowStyle = { + diff --git a/packages/site/src/components/AppHeader.vue b/packages/site/src/components/AppHeader.vue index dae6e81..a38d045 100644 --- a/packages/site/src/components/AppHeader.vue +++ b/packages/site/src/components/AppHeader.vue @@ -1,4 +1,5 @@ diff --git a/packages/site/src/components/BackToTop.vue b/packages/site/src/components/BackToTop.vue new file mode 100644 index 0000000..fa1f315 --- /dev/null +++ b/packages/site/src/components/BackToTop.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/packages/site/src/i18n/en.ts b/packages/site/src/i18n/en.ts index 35f1926..90b8b51 100644 --- a/packages/site/src/i18n/en.ts +++ b/packages/site/src/i18n/en.ts @@ -8,6 +8,8 @@ export default { navHow: 'How it works', navSecurity: 'Security', navFaq: 'FAQ', + navMenu: 'Menu', + backToTop: 'Back to top', themeToggle: 'Toggle theme', gitea: 'View on Gitea', heroBadge: 'Mission control for AI coding agents', diff --git a/packages/site/src/i18n/fr.ts b/packages/site/src/i18n/fr.ts index 5c0e5b7..bb7b834 100644 --- a/packages/site/src/i18n/fr.ts +++ b/packages/site/src/i18n/fr.ts @@ -8,6 +8,8 @@ export default { navHow: 'Comment ça marche', navSecurity: 'Sécurité', navFaq: 'FAQ', + navMenu: 'Menu', + backToTop: 'Revenir en haut', themeToggle: 'Changer de thème', gitea: 'Voir sur Gitea', heroBadge: 'Poste de commandement pour agents de code IA', diff --git a/packages/site/src/lib/theme.ts b/packages/site/src/lib/theme.ts index 0736fe5..a4fe7ae 100644 --- a/packages/site/src/lib/theme.ts +++ b/packages/site/src/lib/theme.ts @@ -6,8 +6,10 @@ import { computed, ref, watch, type ComputedRef } from 'vue'; export type ThemeMode = 'dark' | 'light' | 'system'; export type ResolvedTheme = 'dark' | 'light'; -// MÊME clé que l'app (packages/web/src/lib/theme.ts) : le site se présente comme aligné sur elle, et -// un visiteur qui bascule le thème ici retrouve le même sur son instance. +// Même NOM de clé que l'app (packages/web/src/lib/theme.ts), par cohérence de nommage. À noter que la +// préférence n'est pas partagée pour autant : le site et une instance Arboretum vivent sur des +// origines différentes (donc des localStorage séparés), et l'app sérialise sa valeur en JSON là où le +// site stocke la chaîne brute, lue telle quelle par le script anti-FOUC de index.html. const STORAGE_KEY = 'arb.theme'; // Doit rester synchronisé avec --color-surface-0 (style.css) : fond du + metas. const BG: Record = { dark: '#09090b', light: '#fafafa' };