Skip to content
AMN Docs

Plan d'implémentation : Navigation Mobile & Affichage Responsive (Style Astro)

Plan d'implémentation : Navigation Mobile & Affichage Responsive (Style Astro)

Documentation de la conception et du déploiement du menu burger mobile, du tiroir de navigation et de la disposition responsive pour /blog et les détails d'articles.

1. Contexte & Objectifs1/3

L’objectif de cette tâche est d’aligner l’expérience mobile du blog AMN (/blog) et des pages de détails de post (/blog/[slug]) sur les standards de conception du site officiel d’Astro (astro.build) :

1. Contexte & Objectifs2/3

  1. Header Mobile avec Menu Burger : Affichage d’un bouton burger accessible à trois barres horizontales basculant sur une croix de fermeture ✕ lors de l’ouverture.
  2. Tiroir de Navigation Mobile (Drawer) : Panneau plein écran sombre reprenant l’intégralité des éléments du header :
    • Liens directs (Blog)
    • Accordéons repliables avec chevrons animés (Resources, Community, Enterprise)
    • Rangée inférieure : Liens vers les réseaux sociaux adaptés au thème sombre + Bouton d’action pilule dégradé (Read the docs).

1. Contexte & Objectifs3/3

  1. Ordre d’affichage responsive sur /blog :
    • Sur mobile, la liste des articles de blog s’affiche immédiatement sous le Hero (Welcome, world), avant les éléments secondaires (sidebar réorganisée en bas de page).
  2. Affichage responsive des détails d’article (/blog/[slug]) :
    • Estrade visuelle avec encoches responsives (clip-path), métadonnées centrées et lecture calibrée du contenu.

2. Analyse de l’intégration native Astro

Constat technique

  • Astro ne propose pas de composant de menu burger pré-packagé ou “natif” dans son runtime core.
  • En revanche, la philosophie officielle d’Astro (zéro JavaScript inutile) privilégie l’utilisation de composants Astro standards (.astro), de balises HTML5 sémantiques et accessibles (<details>, <summary>, <button aria-expanded>), et d’un script scoped vanilla très léger.
  • Cette approche garantit des performances maximales sans ajouter de librairie externe lourde.

3. Architecture Technique

3.1 Gestion centralisée dans Sanity

  • Schéma headerSettings : Ajout du champ ctaButton (label et lien URL) pour piloter le bouton pilule dégradé depuis le Studio Sanity.
  • Récupération unifiée : Le layout MainLayout.astro transmet à <Header /> les éléments de navigation (navItems), le bouton d’action (ctaButton), et les liens sociaux (socialLinks partagés avec footerSettings).

3.2 Composant Header.astro

  • Bouton burger mobile (#mobile-menu-btn) avec icônes SVG commutables (3 barres / croix).
  • Tiroir fixe (#mobile-menu) en fixed inset-x-0 top-16 h-[calc(100dvh-4rem)] z-50 bg-[#0b0d13].
  • Balises HTML <details> et <summary> avec chevrons animés (group-open:rotate-180) pour les sous-menus accordéons.
  • Gestion du blocage du défilement d’arrière-plan (document.body.classList.toggle('overflow-hidden')).

3.3 Réorganisation responsive sur /blog/index.astro

  • Structure flexbox adaptative :
    • Mobile (< lg) : <section> des articles en order-1, <aside> (BlogSidebar) en order-2.
    • Desktop (lg:flex-row) : <aside> en lg:order-1 (colonne gauche), <section> en lg:order-2 (colonne droite).

4. Validation visuelle & Tests

  • Résolution testée : 390x844 (Mobile standard).
  • Page /blog : Affichage immédiat du Hero puis du premier article avec ses tags et sa couverture.
  • Tiroir mobile : Déploiement fluide à l’ouverture, chevrons d’accordéons fonctionnels, icônes sociales contrastées et bouton dégradé conforme.
  • Détail d’article : Image avec effet d’estrade adaptée, typographie de lecture fluide et navigation liée.
Switch to normal mode

Contents

Built with StarlightPowered by Cloudflare