Une barre de navigation latérale qui vous permet de basculer entre un affichage pleine taille avec du texte et un affichage compact avec uniquement des icônes, souvent visibles sur les écrans de gestion et les tableaux de bord. Idéal si vous souhaitez maximiser la zone d’affichage de la zone de contenu.

Aperçu

Dashboard Overview

Welcome back, Jane. Here is what’s happening today.

Total Revenue

$45,231

Active Users

2,410

New Orders

142

Recent Activity

Cas d’utilisation et fonctionnalités

Tableau de bord et écran d’administration : conçu pour permettre aux utilisateurs de se concentrer sur le contenu principal (graphiques, tableaux de données, etc.) en réduisant la navigation selon les besoins.
Complétion avec des info-bulles : Même lorsqu’il est dans un état compact avec uniquement des icônes, l’accessibilité et la facilité d’utilisation sont assurées par l’affichage d’info-bulles au survol.
Animation fluide : En combinant la largeur, la transparence (« opacité ») et « max-width », nous obtenons un mouvement naturel dans lequel le texte disparaît et apparaît en douceur.

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

Prévention du débordement de texte : La combinaison de « max-w-0 » et « overflow-hidden » empêche le texte de se diviser en nouvelles lignes et de rompre la mise en page une fois plié.
Mise en évidence visuelle de l’état actif : L’élément de menu actuellement sélectionné a un fond bleu et une couleur de texte pour transmettre intuitivement la position actuelle.
Guider l’œil : le bouton à bascule pour l’ouverture et la fermeture est placé sur le bord de la barre latérale pour augmenter la possibilité de « appuyez ici pour vous déplacer ».

Comment personnaliser (Guide de personnalisation)

Modifiez la largeur de la barre latérale : vous pouvez l’ajuster à la taille souhaitée en modifiant « w-64 » (une fois développé) ou « w-20 » (une fois réduit) du côté du code d’implémentation.
Changement des couleurs du thème : en remplaçant les classes utilitaires bg-blue-600 et text-blue-700 en même temps, vous pouvez les appliquer à des designs qui correspondent aux couleurs de votre marque.

Code d’implémentation (Implémentation)

<div className="flex h-screen bg-slate-50 font-sans overflow-hidden">
    
    {/* Sidebar */}
    <aside 
      className={`bg-white border-r border-slate-200 flex flex-col transition-all duration-300 ease-in-out relative z-10 ${
        isCollapsed ? 'w-20' : 'w-64'
      }`}
    >
      {/* Header */}
      <div className="h-16 flex items-center px-4 border-b border-slate-100 shrink-0">
        <div className="flex items-center gap-3 overflow-hidden whitespace-nowrap">
          <div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center shrink-0 shadow-sm shadow-blue-200">
            <Hexagon className="w-6 h-6 text-white" />
          </div>
          <span 
            className={`font-bold text-slate-800 text-xl transition-all duration-300 overflow-hidden ${
              isCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'
            }`}
          >
            DashUI
          </span>
        </div>
      </div>

      {/* Navigation */}
      <nav className="flex-1 py-6 px-3 space-y-2 overflow-y-auto overflow-x-hidden">
        {navItems.map((item, index) => (
          <a 
            key={index}
            href="#" 
            className={`flex items-center gap-3 px-3 py-3 rounded-xl transition-colors group relative ${
              item.active 
                ? 'text-blue-700 bg-blue-50 hover:bg-blue-100' 
                : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900'
            }`}
          >
            <item.icon className="w-6 h-6 shrink-0" />
            
            <span 
              className={`font-semibold whitespace-nowrap transition-all duration-300 flex-1 text-sm overflow-hidden ${
                isCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'
              }`}
            >
              {item.label}
            </span>

            {/* Badge display (only when expanded) */}
            {!isCollapsed && item.badge && (
              <span className="bg-blue-100 text-blue-700 py-0.5 px-2 rounded-full text-xs font-bold whitespace-nowrap">
                {item.badge}
              </span>
            )}

            {/* Tooltip (displayed on hover only when collapsed) */}
            {isCollapsed && (
              <div className="absolute left-14 hidden group-hover:block bg-slate-800 text-white text-xs px-2.5 py-1.5 rounded-md shadow-lg z-20 whitespace-nowrap pointer-events-none opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                {item.label}
              </div>
            )}
          </a>
        ))}
      </nav>

      {/* Footer Profile */}
      <div className="p-4 border-t border-slate-100 shrink-0">
        <a href="#" className="flex items-center gap-3 hover:bg-slate-50 p-2 -m-2 rounded-xl transition-colors">
          <img 
            src="https://i.pravatar.cc/150?u=a042581f4e29026704d" 
            alt="User Avatar" 
            className="w-10 h-10 rounded-full shrink-0 border border-slate-200 object-cover" 
          />
          <div 
            className={`flex-1 min-w-0 transition-all duration-300 overflow-hidden ${
              isCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'
            }`}
          >
            <p className="text-sm font-semibold text-slate-900 truncate">Jane Doe</p>
            <p className="text-xs text-slate-500 truncate">Admin</p>
          </div>
        </a>
      </div>
    </aside>

    {/* Toggle Button */}
    <button 
      onClick={() => setIsCollapsed(!isCollapsed)}
      className={`absolute top-6 z-20 cursor-pointer bg-white border border-slate-200 text-slate-500 hover:text-blue-600 hover:bg-blue-50 rounded-full p-1.5 shadow-sm transition-all duration-300 ${
        isCollapsed ? 'left-[4.2rem]' : 'left-[15rem]'
      }`}
      aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
    >
      <ChevronLeft className={`w-4 h-4 transition-transform duration-300 ${isCollapsed ? 'rotate-180' : ''}`} />
    </button>

{/* Zone de contenu principale (exemple) */}
    <main className="flex-1 p-8 overflow-y-auto">
      <h1 className="text-2xl font-bold text-slate-900">Tableau de bord</h1>
      <p className="text-slate-500 mt-1">Sélectionnez un élément dans la barre latérale.</p>
    </main>

</div>
);
}

Prise en charge du navigateur

Fonctionne bien avec les dernières versions des navigateurs modernes (Chrome, Firefox, Safari, Edge).
Les animations transition-all et max-w-0 s’affichent également de manière fluide dans tous les navigateurs modernes.