Une présentation de base qui combine une barre latérale gauche et un en-tête supérieur, la plus couramment utilisée dans les applications SaaS modernes et les tableaux de bord d’administration.

Cas d’utilisation et fonctionnalités

• Écran de gestion/Produit SaaS : Idéal pour les applications comportant de nombreux éléments de navigation.
• Compatibilité Responsive : La barre latérale toujours affichée sur le bureau est conçue pour être masquée sur les écrans des mobiles et des tablettes (en fonctionnement réel, elle s’affiche dans un tiroir avec un menu hamburger, etc.).
• Disposition Flexbox : Une structure calculée pour s’adapter à la hauteur plein écran en combinant des utilitaires tels que flex-1 et min-w-0. Seule la zone de contenu principale défile, l’en-tête et la barre latérale sont fixes.

Points clés du design et de l’UX (Design & UX)

• Séparation de la zone de défilement : La navigation à gauche (nav dans aside) et le défilement du contenu principal (main) à droite sont indépendants, donc même les menus longs n’interfèrent pas avec l’écran principal.
• Barre de défilement personnalisée : nous utilisons ::-webkit-scrollbar pour modifier la barre de défilement épaisse par défaut en un design plus fin et plus élégant qui réduit le bruit de l’interface utilisateur.
• Structure hiérarchique très visible : En combinant les couleurs d’arrière-plan (bg-slate-50 et bg-white), les bordures (border-slate-200) et les ombres claires (shadow-sm), les limites de chaque section sont exprimées naturellement.

Comment personnaliser (Guide de personnalisation)

• Largeur de la barre latérale : Vous pouvez ajuster la largeur en modifiant « w-64 » (16rem = 256px) spécifié dans « aside » par « w-72 » ou « w-56 ».
• Hauteur de l’en-tête : Vous pouvez contrôler la hauteur globale en modifiant “l’en-tête” et la zone du logo en haut de la barre latérale de “h-16” (4rem = 64px) à “h-14”, etc.
• Changer la couleur du thème : Veuillez remplacer « indigo-600 », etc. utilisé dans chaque icône et menu actif par la couleur de votre marque (par exemple « bleu-600 » ou « violet-500 »).

code d’implémentation (Implementation)

<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- barre latérale -->
<aside class="hidden md:flex flex-col w-64 bg-white border-r border-slate-200 shrink-0">
  <div class="h-16 flex items-center px-6 border-b border-slate-200 shrink-0">
    <a href="#" class="font-bold text-lg text-indigo-600">NexusApp</a>
  </div>
  
  <nav class="flex-1 overflow-y-auto py-4 px-3">
    <ul class="space-y-1">
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-indigo-50 text-indigo-600">
          Dashboard
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50">
          Team
        </a>
      </li>
    </ul>
  </nav>
</aside>

<!-- Conteneur principal -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
  <!-- En-tête -->
  <header class="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-200 shadow-sm shrink-0">
    <div class="flex items-center gap-4">
      <!-- Basculement de menu pour mobile -->
      <button class="md:hidden p-2 text-slate-500 hover:text-slate-900 rounded-md">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
      </button>
    </div>
    
    <div class="flex items-center gap-4">
      <button class="p-2 text-slate-400 hover:text-slate-600 rounded-full">
        <!-- Notification icons, etc. -->
      </button>
      <div class="h-8 w-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm font-bold">
        JS
      </div>
    </div>
  </header>
  
  <!-- Main content area -->
  <main class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
    <div class="max-w-7xl mx-auto">
      <!-- Place page-specific content here -->
      <h1 class="text-2xl font-bold text-slate-900 mb-6">Dashboard</h1>
    </div>
  </main>
</div>
</div>

Prise en charge du navigateur

• Fonctionne correctement avec les dernières versions des navigateurs modernes (Chrome, Safari, Firefox, Edge).
• Les anciens navigateurs (IE, etc.) ne sont pas pris en charge car Flexbox (flex, flex-1, flex-col) est largement utilisé.