Rechercher des composants

Catégories

Composants Barre latérale

Barre latérale

Zone de contenu sur le côté de la page

3D_Sidebar_Documentation_Wiki

Un composant de barre latérale réactif complexe, inspiré de la 3D, pour la documentation et les sites wiki, utilisant des neutres chauds avec une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans">

  <!-- Sidebar -->
  <aside class="w-64 bg-white dark:bg-gray-800 shadow-xl transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-40 fixed md:relative" id="sidebar">
    <div class="h-16 flex items-center justify-between px-6 border-b border-gray-200 dark:border-gray-700">
      <a href="#" class="text-2xl font-extrabold text-gray-800 dark:text-gray-100 tracking-tight relative">
        <span class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-amber-400 to-amber-600 dark:from-yellow-500 dark:to-orange-700 opacity-20 rounded-lg blur-sm"></span>
        <span class="relative z-10">WikiHub</span>
      </a>
      <button onclick="document.getElementById('sidebar').classList.add('-translate-x-full')" class="md:hidden focus:outline-none text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    
    <nav class="px-4 py-6 overflow-y-auto custom-scrollbar">
      <ul class="space-y-2">
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out group relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 mr-3 transition-colors duration-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
            <span class="relative z-10">Home</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out group relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 mr-3 transition-colors duration-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
            <span class="relative z-10">Getting Started</span>
          </a>
        </li>
        <li>
          <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Core Concepts</h3>
          <ul class="space-y-1 pl-4">
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Introduction</span>
              </a>
            </li>
            <li>
              <a href="#" class="relative flex items-center p-2 text-amber-600 dark:text-yellow-400 bg-amber-50 dark:bg-gray-700 rounded-md font-medium shadow-sm active:bg-amber-100 dark:active:bg-gray-600">
                <span class="text-sm">Architecture Overview</span>
                <span class="absolute inset-0 border-2 border-amber-400 dark:border-yellow-600 rounded-md animate-pulse pointer-events-none opacity-50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Data Models</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">API Reference</span>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Guides</h3>
          <ul class="space-y-1 pl-4">
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Installation</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Configuration</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Deployment</span>
                <span class="ml-auto text-xs py-0.5 px-2 bg-amber-100 dark:bg-amber-800 text-amber-700 dark:text-amber-200 rounded-full font-medium shadow-inner opacity-75">New</span>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Resources</h3>
          <ul class="space-y-1 pl-4">
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Changelog</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">FAQ</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Support</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

    <div class="p-4 mt-auto border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3 mb-4">
        <img class="w-10 h-10 rounded-full border border-gray-200 dark:border-gray-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-out" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Documentation Admin</p>
        </div>
      </div>
      <button class="w-full flex items-center justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-yellow-500 transition-all duration-200 ease-in-out relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
        <svg class="mr-2 -ml-1 w-5 h-5 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
        <span class="relative z-10">Logout</span>
      </button>
      
      <!-- Dark mode toggle -->
      <div class="mt-4 flex items-center justify-between text-gray-600 dark:text-gray-300">
        <label for="dark-mode-toggle" class="cursor-pointer flex items-center">
          <div class="relative">
            <input type="checkbox" id="dark-mode-toggle" class="sr-only" onchange="document.documentElement.classList.toggle('dark')">
            <div class="block bg-gray-300 dark:bg-gray-700 w-10 h-6 rounded-full"></div>
            <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform dark:translate-x-full dark:bg-gray-100"></div>
          </div>
          <span class="ml-3 text-sm">Dark Mode</span>
        </label>
      </div>

    </div>
  </aside>

  <!-- Main Content Area (Placeholder) -->
  <div class="flex-1 flex flex-col overflow-hidden relative">
    <!-- Top Bar for mobile menu button -->
    <header class="bg-white dark:bg-gray-800 shadow-sm h-16 flex items-center px-4 md:hidden border-b border-gray-200 dark:border-gray-700 relative z-30">
      <button onclick="document.getElementById('sidebar').classList.remove('-translate-x-full')" class="focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 mr-4">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
      <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">Documentation</h1>
    </header>

    <main class="flex-1 overflow-x-hidden overflow-y-auto p-6 lg:p-8 custom-scrollbar">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl mb-6 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100 to-amber-300 dark:from-yellow-700 dark:to-orange-800 opacity-5 dark:opacity-10 rounded-lg blur-md"></div>
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Welcome to WikiHub!</h2>
        <p class="text-gray-600 dark:text-gray-300 relative z-10">Explore our comprehensive guides and documentation.</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
           <div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Quick Start</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Get up and running with our step-by-step installation guide.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">API Reference</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Detailed documentation for all available API endpoints.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Troubleshooting</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Solutions to common issues and frequently asked questions.</p>
        </div>
      </div>
    </main>
  </div>

  <style>
    /* Custom scrollbar for better aesthetics */
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: theme('colors.gray.100');
      border-radius: 10px;
    }
    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: theme('colors.gray.700');
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: theme('colors.gray.300');
      border-radius: 10px;
      border: 2px solid theme('colors.gray.100');
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: theme('colors.gray.600');
      border: 2px solid theme('colors.gray.700');
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: theme('colors.gray.400');
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: theme('colors.gray.500');
    }

    /* Dark mode toggle dot animation */
    #dark-mode-toggle:checked + div .dot {
      transform: translateX(100%);
    }
  </style>

</div>

Un composant de barre latérale simple et réactif avec une esthétique rétro/vintage, une palette de couleurs neutres et chaudes, conçu pour les plateformes immobilières. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex h-screen bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 font-mono text-stone-800 dark:text-stone-200 overflow-hidden">

  <!-- Sidebar for larger screens -->
  <aside class="w-64 flex-shrink-0 bg-stone-50 dark:bg-stone-800 border-r border-stone-200 dark:border-stone-700 p-6 hidden md:flex flex-col shadow-lg">
    <div class="mb-8 text-center">
      <h1 class="text-3xl font-bold tracking-wider text-stone-900 dark:text-stone-50 drop-shadow-sm">Neon Estate</h1>
      <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">Your Future Awaits</p>
    </div>

    <nav class="flex-grow">
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-50 hover:bg-stone-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-md transform hover:scale-105">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
            </svg>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm14 9V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h3.586l-1.793 1.793a1 1 0 001.414 1.414L12 18.414l3.793 3.793A1 1 0 0017.207 21l-1.793-1.793V19a2 2 0 002-2v-5zM9 8a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2v-4a2 2 0 00-2-2H9z" clip-rule="evenodd"></path>
            </svg>
            <span>Properties</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
            </svg>
            <span>Clients</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.551a1.5 1.5 0 00-1.06.44l-1.9 1.9A1.5 1.5 0 011 17.05v-4.05a3 3 0 013-3h1V4a1 1 0 00-1-1H3a1 1 0 00-1 1v2zm.5 2H3a1 1 0 00-1 1v4a1 1 0 001 1h.5a.5.5 0 01.5.5V16L7.5 13.5a.5.5 0 01.354-.146H17a1 1 0 001-1V5a1 1 0 00-1-1H7a1 1 0 00-1 1v2zm-2 0z" clip-rule="evenodd"></path>
            </svg>
            <span>Messages</span>
          </a>
        </li>
      </ul>
    </nav>

    <div class="mt-8 pt-4 border-t border-stone-200 dark:border-stone-700">
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
        <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600 shadow-sm" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
        <span class="text-sm font-semibold">John Realtor</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 mt-2">
        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M11.493 15.64a1 1 0 01-.018 1.488S16.29 19 16.29 19a1 1 0 01-.894 1.732h-10a1 1 0 01-.894-1.732s4.815-1.872 4.815-1.872a1 1 0 01-.018-1.488zM4.7 13.5a1 1 0 011.666-.889l8.668 4a1 1 0 01-.158 1.83l-8.668-4a1 1 0 01-.148-1.941zM2 10a1 1 0 01.996.938L3.13 15.06l-.001.002a2 2 0 00-.071 2.072l.092.124.08.106.07.097.06.082L.52 18.665a1 1 0 01-.077-1.393L2.27 15.82a1 1 0 011.4-.298l.006-.002c.005-.002.01-.005.015-.007a1 1 0 01-.065-.006l.005.006zM18 10a1 1 0 00-1-1h-.06l-.004-.002-.016-.007a1 1 0 00-.065.006l.005.006.015.007.004.002h-.06a1 1 0 00-.77 1.638l.007.009.006.007.005.006.004.005.003.004.002.002.001.002a1 1 0 001.488.018s1.872-4.815 1.872-4.815a1 1 0 00-1.732-.894z" clip-rule="evenodd"></path>
        </svg>
        <span>Settings</span>
      </a>
    </div>
  </aside>

  <!-- Mobile/Tablet Top Nav (hidden on desktop) -->
  <header class="md:hidden fixed top-0 left-0 w-full bg-stone-50 dark:bg-stone-800 border-b border-stone-200 dark:border-stone-700 p-4 flex justify-between items-center z-10 shadow-lg">
    <h1 class="text-2xl font-bold tracking-wider text-stone-900 dark:text-stone-50">Neon Estate</h1>
    <button id="mobile-menu-button" class="text-stone-700 dark:text-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 rounded-md p-1">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
      </svg>
    </button>
  </header>

  <!-- Mobile/Tablet Sidebar Overlay (hidden by default) -->
  <div id="mobile-sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden md:hidden"></div>

  <aside id="mobile-sidebar" class="fixed top-0 left-0 h-full w-64 bg-stone-50 dark:bg-stone-800 border-r border-stone-200 dark:border-stone-700 p-6 transform -translate-x-full transition-transform duration-300 ease-in-out z-30 md:hidden shadow-xl">
    <div class="mb-8 text-center">
      <h1 class="text-3xl font-bold tracking-wider text-stone-900 dark:text-stone-50 drop-shadow-sm">Neon Estate</h1>
      <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">Your Future Awaits</p>
    </div>

    <nav class="flex-grow">
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-50 hover:bg-stone-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-md transform hover:scale-105">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
            </svg>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm14 9V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h3.586l-1.793 1.793a1 1 0 001.414 1.414L12 18.414l3.793 3.793A1 1 0 0017.207 21l-1.793-1.793V19a2 2 0 002-2v-5zM9 8a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2v-4a2 2 0 00-2-2H9z" clip-rule="evenodd"></path>
            </svg>
            <span>Properties</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
            </svg>
            <span>Clients</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.551a1.5 1.5 0 00-1.06.44l-1.9 1.9A1.5 1.5 0 011 17.05v-4.05a3 3 0 013-3h1V4a1 1 0 00-1-1H3a1 1 0 00-1 1v2zm.5 2H3a1 1 0 00-1 1v4a1 1 0 001 1h.5a.5.5 0 01.5.5V16L7.5 13.5a.5.5 0 01.354-.146H17a1 1 0 001-1V5a1 1 0 00-1-1H7a1 1 0 00-1 1v2zm-2 0z" clip-rule="evenodd"></path>
            </svg>
            <span>Messages</span>
          </a>
        </li>
      </ul>
    </nav>

    <div class="mt-8 pt-4 border-t border-stone-200 dark:border-stone-700">
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
        <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600 shadow-sm" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
        <span class="text-sm font-semibold">John Realtor</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 mt-2">
        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M11.493 15.64a1 1 0 01-.018 1.488S16.29 19 16.29 19a1 1 0 01-.894 1.732h-10a1 1 0 01-.894-1.732s4.815-1.872 4.815-1.872a1 1 0 01-.018-1.488zM4.7 13.5a1 1 0 011.666-.889l8.668 4a1 1 0 01-.158 1.83l-8.668-4a1 1 0 01-.148-1.941zM2 10a1 1 0 01.996.938L3.13 15.06l-.001.002a2 2 0 00-.071 2.072l.092.124.08.106.07.097.06.082L.52 18.665a1 1 0 01-.077-1.393L2.27 15.82a1 1 0 011.4-.298l.006-.002c.005-.002.01-.005.015-.007a1 1 0 01-.065-.006l.005.006.015.007.004.002h-.06a1 1 0 00-.77 1.638l.007.009.006.007.005.006.004.005.003.004.002.002.001.002a1 1 0 001.488.018s1.872-4.815 1.872-4.815a1 1 0 00-1.732-.894z" clip-rule="evenodd"></path>
        </svg>
        <span>Settings</span>
      </a>
    </div>
  </aside>

  <!-- Main Content Area (for demonstration, just a placeholder) -->
  <main class="flex-1 p-8 pt-20 md:pt-8 overflow-y-auto">
    <h2 class="text-4xl font-bold text-stone-900 dark:text-stone-50 mb-6 drop-shadow-lg">Welcome, John!</h2>
    <p class="mb-8 text-stone-700 dark:text-stone-300 max-w-2xl">Here's a quick overview of your real estate dashboard. Explore properties, manage clients, and track messages.</p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">Total Listings</h3>
        <p class="text-4xl font-bold text-stone-600 dark:text-stone-400">1,234</p>
      </div>
      <div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">New Inquiries</h3>
        <p class="text-4xl font-bold text-teal-600 dark:text-teal-400">42</p>
      </div>
      <div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">Pending Sales</h3>
        <p class="text-4xl font-bold text-orange-600 dark:text-orange-400">15</p>
      </div>
    </div>
  </main>

  <script>
    // Basic JavaScript for mobile sidebar toggle
    document.addEventListener('DOMContentLoaded', () => {
      const mobileMenuButton = document.getElementById('mobile-menu-button');
      const mobileSidebar = document.getElementById('mobile-sidebar');
      const mobileSidebarOverlay = document.getElementById('mobile-sidebar-overlay');

      mobileMenuButton.addEventListener('click', () => {
        mobileSidebar.classList.toggle('-translate-x-full');
        mobileSidebarOverlay.classList.toggle('hidden');
      });

      mobileSidebarOverlay.addEventListener('click', () => {
        mobileSidebar.classList.add('-translate-x-full');
        mobileSidebarOverlay.classList.add('hidden');
      });

      // Close sidebar if screen resized to desktop
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) { // md breakpoint
          mobileSidebar.classList.add('-translate-x-full');
          mobileSidebarOverlay.classList.add('hidden');
        }
      });
    });
  </script>
</div>

3D_Earth_Tones_Non_Profit_Sidebar

Un composant de barre latérale complexe et réactif avec des éléments de conception 3D et une palette de couleurs de terre, adapté aux sites Web à but non lucratif et caritatifs. Inclut la prise en charge du mode sombre et du HTML sémantique.

Ouvrir Aperçu

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans">
  <!-- Mobile / Tablet Overlay -->
  <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden lg:hidden"></div>

  <!-- Sidebar -->
  <aside id="sidebar" class="fixed top-0 left-0 w-64 h-full bg-gradient-to-br from-yellow-700 to-yellow-900 dark:from-gray-800 dark:to-gray-900 text-white transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out z-40 shadow-xl border-r border-yellow-800 dark:border-gray-700 overflow-y-auto overflow-x-hidden flex flex-col pt-6 pb-4">
    <!-- Sidebar Header (3D Effect) -->
    <div class="p-4 mb-8 relative">
      <div class="absolute inset-0 bg-yellow-900 bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg transform rotate-[-2deg] scale-105 shadow-inner"></div>
      <div class="relative flex items-center justify-center p-2 bg-yellow-800 dark:bg-gray-800 rounded-lg transform translate-y-0.5 translate-x-0.5 shadow-md border border-yellow-700 dark:border-gray-700">
        <img src="https://picsum.photos/40/40?random=1" alt="Non-Profit Logo" class="rounded-full mr-3 shadow-md border-2 border-yellow-600 dark:border-gray-600">
        <h1 class="text-2xl font-extrabold tracking-wide text-white drop-shadow-lg">Hope Nexus</h1>
      </div>
    </div>

    <!-- Navigation -->
    <nav class="flex-grow space-y-2 px-4">
      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
            </path>
          </svg>
          <span class="font-semibold">Dashboard</span>
          <span class="ml-auto text-xs font-bold px-2 py-0.5 rounded-full bg-yellow-600 dark:bg-gray-700 text-yellow-100 dark:text-gray-300">New</span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13.493m0-13.493V6.253a4.5 4.5 0 100 9v0M12 6.253C12 5.094 13.921 5 15 5h1a2 2 0 012 2v2M12 6.253a4.5 4.5 0 010 9v0m0 0C12 18.906 10.079 19 9 19H8a2 2 0 01-2-2v-2m6-10V6.253m0 0a4.5 4.5 0 00-4.5 4.5v0m4.5-4.5a4.5 4.5 0 014.5 4.5v0">
            </path>
          </svg>
          <span class="font-semibold">Campaigns</span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z">
            </path>
          </svg>
          <span class="font-semibold">Donations</span>
          <span class="group-hover:animate-ping absolute right-3 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-green-400 opacity-75"></span>
          <span class="absolute right-3 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-green-500"></span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
            </path>
          </svg>
          <span class="font-semibold">Volunteers</span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
            </path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
            </path>
          </svg>
          <span class="font-semibold">Settings</span>
        </div>
      </a>
    </nav>

    <!-- User Profile (Bottom) -->
    <div class="mt-auto p-4">
      <div class="p-3 rounded-xl bg-yellow-800 dark:bg-gray-800 border border-yellow-700 dark:border-gray-700 shadow-lg relative perspective-1000">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-700/20 rounded-xl transform rotate-[2deg] scale-105 shadow-inner"></div>
        <div class="relative flex items-center">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-md border-2 border-yellow-600 dark:border-gray-600">
            <div>
                <p class="font-semibold text-sm text-white">Jane Doe</p>
                <p class="text-xs text-yellow-200 dark:text-gray-400">Administrator</p>
            </div>
            <button class="ml-auto p-2 rounded-full hover:bg-yellow-700 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-gray-500">
                <svg class="w-5 h-5 text-yellow-300 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 9h5a2 2 0 002-2V7a2 2 0 00-2-2h-5">
                    </path>
                </svg>
            </button>
        </div>
      </div>
    </div>
  </aside>

  <!-- Main Content (for demonstration, includes toggle button) -->
  <main class="flex-1 p-6 lg:ml-64 transition-all duration-300 ease-in-out">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Main Content Area</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-6">This is where your main application content would go. The sidebar is fully responsive.</p>
      <div class="flex items-center space-x-4 mb-6">
        <button id="sidebar-toggle" class="lg:hidden p-3 rounded-lg bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 text-white shadow-md">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
        <button id="dark-mode-toggle" class="lg:hidden p-3 rounded-lg bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 text-white shadow-md">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>

        <button id="desktop-dark-mode-toggle" class="hidden lg:block p-3 rounded-lg bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 text-white shadow-md">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>
      </div>
      <p class="text-gray-600 dark:text-gray-400">Resize your browser to see responsiveness. Click the menu icon on smaller screens.</p>
    </div>
  </main>
</div>

<script>
  // Dark Mode Toggle Logic
  const darkModeToggleDesktop = document.getElementById('desktop-dark-mode-toggle');
  const darkModeToggleMobile = document.getElementById('dark-mode-toggle');

  function setDarkMode(isDark) {
    if (isDark) {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    }
  }

  // Check for saved theme or system preference
  if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    setDarkMode(true);
  }

  darkModeToggleDesktop.addEventListener('click', () => {
    setDarkMode(!document.documentElement.classList.contains('dark'));
  });
  darkModeToggleMobile.addEventListener('click', () => {
    setDarkMode(!document.documentElement.classList.contains('dark'));
  });

  // Sidebar Toggle Logic
  const sidebar = document.getElementById('sidebar');
  const sidebarOverlay = document.getElementById('sidebar-overlay');
  const sidebarToggle = document.getElementById('sidebar-toggle');

  const toggleSidebar = () => {
    sidebar.classList.toggle('-translate-x-full');
    sidebarOverlay.classList.toggle('hidden');
  };

  sidebarToggle.addEventListener('click', toggleSidebar);
  sidebarOverlay.addEventListener('click', toggleSidebar);

  // Close sidebar on larger screens if it was open on mobile
  window.addEventListener('resize', () => {
    if (window.innerWidth >= 1024) { // Tailwind's 'lg' breakpoint
      if (!sidebar.classList.contains('lg:translate-x-0')) {
        sidebar.classList.remove('-translate-x-full'); // Ensure it's shown
        sidebar.classList.add('lg:translate-x-0');
      }
      sidebarOverlay.classList.add('hidden'); // Ensure overlay is hidden on desktop
    }
  });
</script>

Consulting_Sidebar_Dark_Candy_Complex

Un composant de barre latérale complexe et réactif pour le conseil/les services, doté d’une interface utilisateur en mode sombre avec des accents de couleurs bonbons/doux. Comprend la navigation, le profil de l’utilisateur et les liens rapides.

Ouvrir Aperçu

                <div class="flex h-screen bg-slate-900 dark:bg-gray-950 text-white font-sans">

  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-slate-800 dark:bg-gray-900 shadow-lg transition-all duration-300 ease-in-out md:translate-x-0" id="sidebar">

    <!-- Sidebar Header/Logo -->
    <div class="flex items-center justify-center h-20 bg-pink-600 dark:bg-pink-700 shadow-md">
      <span class="text-2xl font-bold uppercase tracking-wide text-white">ConsultPro</span>
    </div>

    <!-- User Profile Section -->
    <div class="flex flex-col items-center py-6 border-b border-gray-700 dark:border-gray-800">
      <img class="w-24 h-24 rounded-full border-4 border-pink-400 dark:border-pink-500 shadow-lg" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <p class="mt-3 text-lg font-semibold text-pink-100 dark:text-pink-200">Alice Johnson</p>
      <span class="text-sm text-gray-400 dark:text-gray-500">Senior Consultant</span>
      <div class="flex mt-2 space-x-2">
        <span class="px-3 py-1 text-xs font-semibold text-purple-700 dark:text-purple-300 bg-purple-200 dark:bg-purple-800 rounded-full">Premium</span>
        <span class="px-3 py-1 text-xs font-semibold text-teal-700 dark:text-teal-300 bg-teal-200 dark:bg-teal-800 rounded-full">Active</span>
      </div>
    </div>

    <!-- Navigation Menu -->
    <nav class="flex-1 px-4 py-6 overflow-y-auto custom-scrollbar">
      <ul class="space-y-2">
        <li>
          <a href="#" class="flex items-center p-3 text-pink-100 dark:text-pink-200 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-pink-300 dark:text-pink-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0C9 9 10 6 11 3s4 3 4 9L9 21z"></path></svg>
            <span class="text-md font-medium">Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path></svg>
            <span class="text-md font-medium">Clients</span>
            <span class="ml-auto bg-green-500 dark:bg-green-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full">12</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M10 12l2-2 2 2m-2-2v6m0-4h.01"></path></svg>
            <span class="text-md font-medium">Projects</span>
            <span class="ml-auto bg-yellow-500 dark:bg-yellow-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full">New</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="text-md font-medium">Schedule</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M9 3H5C3.895 3 3 3.895 3 5V19c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2h-4M9 3v2c0 1.105-.895 2-2 2H5m14-4v2c0 1.105-.895 2-2 2h-4"></path></svg>
            <span class="text-md font-medium">Reports</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.071-.16.2-.28.35-.38l.608-.433a.997.997 0 011.034 0l.608.433c.15.1.279.22.35.38C14.072 5.097 15 5.928 15 7v3.586a1 1 0 01-.293.707l-3.586 3.586a1 1 0 01-1.414 0L7.293 11.293A1 1 0 017 10.586V7c0-1.072.928-1.903 2.175-2.683zM14 2c1 0 2 .5 2 1.5V11a2 2 0 01-2 2l-3 3c-.5.5-.667.667-1 1s-.5 0-1-1l-3-3a2 2 0 01-2-2V3.5C6 2.5 7 2 8 2h6zM4 17a2 2 0 002 2h12a2 2 0 002-2v-4a1 1 0 00-1-1H5a1 1 0 00-1 1v4z"></path></svg>
            <span class="text-md font-medium">Settings</span>
          </a>
        </li>
      </ul>

      <div class="mt-8">
        <h3 class="text-xs uppercase font-semibold text-gray-400 dark:text-gray-500 mb-2">Quick Links</h3>
        <ul class="space-y-1">
          <li>
            <a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
              <span class="w-2 h-2 rounded-full bg-blue-500 dark:bg-blue-600 mr-2"></span> Latest Articles
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
              <span class="w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-600 mr-2"></span> Upcoming Events
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
              <span class="w-2 h-2 rounded-full bg-orange-500 dark:bg-orange-600 mr-2"></span> My Tasks
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- Sidebar Footer -->
    <div class="p-4 border-t border-gray-700 dark:border-gray-800">
      <button class="flex items-center justify-center w-full px-4 py-2 text-white bg-pink-600 dark:bg-pink-700 rounded-lg shadow-md hover:bg-pink-700 dark:hover:bg-pink-800 transition duration-200 ease-in-out">
        <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
        <span>Logout</span>
      </button>
    </div>
  </div>

  <!-- Main Content Area (for demonstration, can be expanded) -->
  <div class="flex-1 flex flex-col p-8">
    <h1 class="text-3xl font-bold text-pink-400 dark:text-pink-300 mb-6">Dashboard Overview</h1>
    <p class="text-gray-300 dark:text-gray-400">Welcome back, Alice! Here's a quick look at your current activities.</p>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
        <h2 class="text-lg font-semibold text-pink-200 mb-2">Active Projects</h2>
        <p class="text-4xl font-bold text-pink-400">23</p>
        <span class="text-sm text-green-400">+5 this month</span>
      </div>
      <div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
        <h2 class="text-lg font-semibold text-pink-200 mb-2">New Clients</h2>
        <p class="text-4xl font-bold text-pink-400">8</p>
        <span class="text-sm text-yellow-400">+2 this week</span>
      </div>
      <div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
        <h2 class="text-lg font-semibold text-pink-200 mb-2">Pending Tasks</h2>
        <p class="text-4xl font-bold text-pink-400">17</p>
        <span class="text-sm text-red-400">Urgent: 3</span>
      </div>
    </div>
  </div>

  <!-- Mobile Sidebar Toggle (hidden on desktop) -->
  <button class="md:hidden fixed top-4 left-4 z-50 p-3 rounded-full bg-pink-600 dark:bg-pink-700 text-white shadow-xl focus:outline-none" onclick="document.getElementById('sidebar').classList.toggle('translate-x-full'); document.getElementById('sidebar').classList.toggle('bg-slate-800'); document.getElementById('sidebar').classList.toggle('dark:bg-gray-900'); this.classList.toggle('translate-x-52');">
    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
  </button>

  <!-- Overlay for mobile (hidden on desktop) -->
  <div class="md:hidden fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300 ease-in-out opacity-0 pointer-events-none" id="sidebar-overlay"></div>

  <!-- Inline style for custom-scrollbar -->
  <style>
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: #374151; /* gray-700 */
      border-radius: 4px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: #1f2937; /* gray-800 */
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #f472b6; /* pink-400 */
      border-radius: 4px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #ec4899; /* pink-500 */
    }

    /* Mobile specific adjustments using JS for sidebar toggle */
    @media (max-width: 767px) {
      #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        transform: translateX(-100%);
      }
      .toggle-button {
        transition: transform 0.3s ease-in-out;
      }
      .sidebar-open #sidebar {
        transform: translateX(0%);
      }
      .sidebar-open .toggle-button {
        transform: translateX(208px); /* 256px sidebar width - 48px button width */
      }
      .sidebar-open #sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
      }
    }
  </style>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const sidebar = document.getElementById('sidebar');
      const sidebarToggle = document.querySelector('button[onclick*="sidebar"]');
      const sidebarOverlay = document.getElementById('sidebar-overlay');

      sidebarToggle.addEventListener('click', () => {
        document.body.classList.toggle('sidebar-open');
        sidebar.classList.toggle('translate-x-0');
        sidebar.classList.toggle('-translate-x-full'); // Added to ensure it slides off screen
        sidebarOverlay.classList.toggle('opacity-0');
        sidebarOverlay.classList.toggle('pointer-events-none');
        sidebarOverlay.classList.toggle('opacity-100');
        sidebarOverlay.classList.toggle('pointer-events-auto');
      });

      sidebarOverlay.addEventListener('click', () => {
        document.body.classList.remove('sidebar-open');
        sidebar.classList.remove('translate-x-0');
        sidebar.classList.add('-translate-x-full');
        sidebarOverlay.classList.add('opacity-0');
        sidebarOverlay.classList.add('pointer-events-none');
        sidebarOverlay.classList.remove('opacity-100');
        sidebarOverlay.classList.remove('pointer-events-auto');
        // Also revert the button position
        sidebarToggle.classList.remove('translate-x-52');
      });

      // Close sidebar if window resized to desktop from mobile
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) {
          document.body.classList.remove('sidebar-open');
          sidebar.classList.remove('-translate-x-full');
          sidebar.classList.add('translate-x-0');
          sidebarOverlay.classList.add('opacity-0');
          sidebarOverlay.classList.add('pointer-events-none');
          sidebarOverlay.classList.remove('opacity-100');
          sidebarOverlay.classList.remove('pointer-events-auto');
          // Revert button for desktop view
          sidebarToggle.classList.remove('translate-x-52');
        }
      });
    });
  </script>
</div>

Composant de la barre latérale de crypto-monnaie

Un composant de barre latérale complexe et réactif conçu pour les applications de crypto-monnaie et de blockchain, avec des principes de conception matérielle avec une palette de couleurs sourdes et une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <div class="w-64 flex-shrink-0 bg-white dark:bg-gray-800 shadow-lg md:relative absolute inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition duration-300 ease-in-out z-40" id="sidebar">
    <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <svg class="w-8 h-8 text-indigo-600 dark:text-indigo-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M10.25 10h3.5m-3.5 3h3.5m-4.5 9V5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3-7 3z"></path>
        </svg>
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">CryptoVault</span>
      </div>
      <button class="md:hidden text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none" onclick="document.getElementById('sidebar').classList.add('-translate-x-full'); document.getElementById('backdrop').classList.add('hidden');">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <nav class="mt-4">
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out active:bg-gray-300 dark:active:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-15 4v-2a3 3 0 013-3h2m0 0a3 3 0 013-3h2m-3 2v5h-5M3 12h18"></path>
        </svg>
        Dashboard
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-indigo-600 dark:text-indigo-400 bg-gray-200 dark:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out shadow-sm">
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4.636 17.364l-.707.707M3 12H2m1-.636L1.636 4.636l.707.707M12 22v-1m-4.636-.707l-.707-.707M3 12h-1M12 21v-1m-4.636-1.364l-.707-.707M2 12h-1M12 23v-1M12 15a3 3 0 110-6 3 3 0 010 6z"></path>
        </svg>
        Portfolio
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2m0 0v6a2 2 0 002 2h2m2-4h1v4c0 .552.448 1 1 1h2a1 1 0 001-1v-4h1m-6 0h6m-9-6h9c1.657 0 3 1.343 3 3v3H3V6c0-1.657 1.343-3 3-3z"></path>
        </svg>
        Transactions
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 11-9 9m9-9A9 9 0 0121 12a9 9 0 01-9 9m-9-9a9 9 0 009 9m0-9V5"></path>
        </svg>
        Exchange
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
        </svg>
        Analytics
      </a>
    </nav>
    <div class="mt-auto p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3 mb-4">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-indigo-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-gray-900 dark:text-gray-100">Jane Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Premium User</p>
        </div>
      </div>
      <a href="#" class="w-full flex items-center justify-center py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        Settings
      </a>
    </div>
  </div>

  <!-- Main Content Area Placeholder -->
  <div class="flex-1 flex flex-col overflow-hidden">
    <!-- Top Bar (Minimal for this component) -->
    <header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-md">
      <button class="md:hidden focus:outline-none text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" onclick="document.getElementById('sidebar').classList.remove('-translate-x-full'); document.getElementById('backdrop').classList.remove('hidden');">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
      <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio Overview</h1>
      <div class="flex items-center space-x-4">
        <!-- Dark mode toggle placeholder -->
        <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500" onclick="document.documentElement.classList.toggle('dark')">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>
      </div>
    </header>
    <main class="flex-1 overflow-x-hidden overflow-y-auto p-6">
      <!-- Your main content goes here -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Total Balance</h2>
          <p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">$23,456.78</p>
          <p class="text-sm text-green-500 mt-2">+3.4% today</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Bitcoin Holding</h2>
          <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">0.5 BTC</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Value: $15,000</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Recent Activity</h2>
          <ul class="space-y-3">
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Buy ETH</span>
              <span class="text-green-500">+$500</span>
            </li>
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Sell ADA</span>
              <span class="text-red-500">-$120</span>
            </li>
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Deposit USD</span>
              <span class="text-green-500">+$1000</span>
            </li>
          </ul>
        </div>
      </div>
    </main>
  </div>

  <!-- Overlay for mobile sidebar -->
  <div class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden" id="backdrop" onclick="document.getElementById('sidebar').classList.add('-translate-x-full'); this.classList.add('hidden');"></div>
</div>

Gradient Agriculture Barre latérale

Un composant de barre latérale simple et réactif avec un design en dégradé monochromatique, adapté à l’agriculture et aux sites Web agricoles. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <aside class="flex flex-col w-64 bg-gradient-to-br from-green-500 to-emerald-700 text-white shadow-lg dark:from-green-700 dark:to-emerald-900 transition-all duration-300 ease-in-out">
    <div class="flex items-center justify-center h-20 border-b border-green-600 dark:border-green-800">
      <h1 class="text-3xl font-bold tracking-wide transition-colors duration-300 dark:text-gray-100">AgriHub</h1>
    </div>
    <nav class="flex-1 py-6 space-y-2 overflow-y-auto custom-scrollbar">
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
        Dashboard
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        Crop Management
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
        </svg>
        Livestock
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
        </svg>
        Resources
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        Settings
      </a>
    </nav>
    <div class="p-6 border-t border-green-600 dark:border-green-800">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-200 dark:border-green-400 object-cover" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-green-50 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-green-100 dark:text-gray-300">Admin</p>
        </div>
      </div>
    </div>
  </aside>
  <main class="flex-1 p-6 lg:p-10 overflow-y-auto custom-scrollbar">
    <h2 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 transition-colors duration-300">Welcome to AgriHub!</h2>
    <p class="text-gray-700 dark:text-gray-300 text-lg mb-8 transition-colors duration-300">Manage your farm operations efficiently and effectively.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Total Crops</h3>
        <p class="text-4xl font-bold text-green-600 dark:text-green-400">120 Acres</p>
        <img src="https://picsum.photos/id/101/400/250" alt="Field View" class="mt-4 rounded-lg object-cover w-full h-40">
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Livestock Count</h3>
        <p class="text-4xl font-bold text-green-600 dark:text-green-400">345 Heads</p>
        <img src="https://picsum.photos/id/200/400/250" alt="Livestock" class="mt-4 rounded-lg object-cover w-full h-40">
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Recent Activity</h3>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Harvested Wheat (5 days ago)</li>
          <li>Fertilized Corn Field (2 days ago)</li>
          <li>Cattle vaccinated (yesterday)</li>
        </ul>
        <img src="https://picsum.photos/id/300/400/250" alt="Farm Activity" class="mt-4 rounded-lg object-cover w-full h-40">
      </div>
    </div>
  </main>
</div>

<style>
  /* Custom scrollbar for better appearance */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }

  /* Dark mode scrollbar */
  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.6);
  }

  /* For responsiveness, adjust sidebar width on smaller screens */
  @media (max-width: 768px) {
    aside {
      width: 100%;
      height: auto;
      position: relative; /* Allow sidebar to stack */
      flex-direction: row; /* Stack items horizontally on mobile */
      flex-wrap: wrap; /* Allow wrapping */
      justify-content: space-around; /* Distribute items */
      padding-top: 0;
      padding-bottom: 0;
    }

    aside div:first-child {
      display: none; /* Hide logo/title on very small screens if desired */
    }

    aside nav {
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      padding-top: 1rem;
      padding-bottom: 1rem;
      width: 100%;
    }

    aside nav a {
      min-width: 120px;
      justify-content: center;
      padding: 0.75rem 1rem;
      font-size: 0.9rem;
      flex-shrink: 0;
    }

    aside nav a svg {
        margin-right: 0.5rem;
    }

    aside div:last-child {
      display: none; /* Hide user info on very small screens */
    }

    main {
      padding: 1rem;
    }
  }
</style>

Neon_Glow_Grayscale_Sports_Sidebar

Un composant de barre latérale complexe et réactif pour les applications de sport/fitness, avec des effets de néon/lueur dans une palette de couleurs en niveaux de gris. Inclut la prise en charge du mode sombre et des éléments interactifs tels que le profil, la navigation, les équipes et les paramètres.

Ouvrir Aperçu

                <div class="flex h-screen bg-gray-950 text-gray-300 dark:bg-black dark:text-gray-200">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 md:w-72 bg-gray-900 border-r border-gray-800 shadow-xl dark:bg-[#1a1a1a] dark:border-gray-800 transition-all duration-300">
    <div class="flex items-center justify-center h-20 border-b border-gray-800 relative">
      <div class="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/20 to-transparent blur-md opacity-0 dark:opacity-100 transition-opacity duration-500"></div>
      <div class="absolute inset-0 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent blur-3xl opacity-0 dark:opacity-100 transition-opacity duration-500 z-0"></div>
      <h1 class="text-2xl font-extrabold tracking-wider uppercase text-gray-50 dark:text-gray-50 relative z-10">
        <span class="text-blue-400 dark:text-blue-500">FIT</span><span class="text-pink-400 dark:text-pink-500">HUB</span>
      </h1>
    </div>

    <nav class="flex-1 py-6 px-4 space-y-2 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-gray-900">

      <!-- Profile Section -->
      <div class="flex items-center p-4 rounded-lg bg-gray-800 hover:bg-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-200 relative group">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <img class="h-12 w-12 rounded-full border-2 border-blue-400 dark:border-blue-500 object-cover relative z-10" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
        <div class="ml-4 relative z-10">
          <p class="font-semibold text-gray-50 dark:text-gray-100">Jane Doe</p>
          <p class="text-sm text-gray-400 dark:text-gray-400">Athlete Pro</p>
        </div>
      </div>

      <!-- Main Navigation -->
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m-6 0v3H9m0-6h.01M10 12l-2 2m2-2l2 2m-6 4h4"></path></svg>
        <span class="relative z-10">Dashboard</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-pink-600/30 hover:text-pink-400 dark:hover:bg-pink-500/20 dark:hover:text-pink-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-pink-500/10 dark:bg-pink-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm12-3c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zM9 10l12-3"></path></svg>
        <span class="relative z-10">Workouts</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h-4l-3-3H6.5a2.5 2.5 0 010-5H17l-3-3h4l3 3V20z"></path></svg>
        <span class="relative z-10">Team Stats</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-pink-600/30 hover:text-pink-400 dark:hover:bg-pink-500/20 dark:hover:text-pink-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-pink-500/10 dark:bg-pink-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
        <span class="relative z-10">Schedule</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L3 11m0 0l6-6m-6 6h12a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2zm0 0l6-6m-6 6h12a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2z"></path></svg>
        <span class="relative z-10">Reports</span>
      </a>

      <!-- Teams Section -->
      <div class="pt-4">
        <h3 class="text-xs uppercase tracking-wider text-gray-500 font-semibold mb-2">Teams</h3>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-red-500 relative z-10 animate-pulse-glow-red"></span>
          <span class="ml-3 relative z-10">Phoenix United</span>
        </a>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-green-500 relative z-10 animate-pulse-glow-green"></span>
          <span class="ml-3 relative z-10">Galaxy Runners</span>
        </a>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-purple-500 relative z-10 animate-pulse-glow-purple"></span>
          <span class="ml-3 relative z-10">Zenith Strikers</span>
        </a>
      </div>
    </nav>

    <!-- Footer / Settings -->
    <div class="px-4 py-6 border-t border-gray-800">
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span class="relative z-10">Settings</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h12"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span class="relative z-10">Logout</span>
      </a>
    </div>
  </div>

  <!-- Main Content Area (for demonstration, not part of the sidebar itself) -->
  <div class="flex-1 p-8 text-gray-100 dark:text-gray-50 overflow-auto">
    <h2 class="text-3xl font-bold mb-6">
      <span class="text-blue-400 dark:text-blue-500">Welcome,</span> <span class="text-pink-400 dark:text-pink-500">Athlete!</span>
    </h2>
    <p class="mb-4">This is a placeholder for your main application content.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Daily Activity</h3>
        <p class="text-gray-400 relative z-10">Track your steps, calories, and active minutes.</p>
        <img src="https://picsum.photos/300/200?random=1" alt="Daily Activity" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Upcoming Events</h3>
        <p class="text-gray-400 relative z-10">Don't miss a game or practice session.</p>
        <img src="https://picsum.photos/300/200?random=2" alt="Upcoming Events" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Performance Insights</h3>
        <p class="text-gray-400 relative z-10">Visualize your progress over time.</p>
        <img src="https://picsum.photos/300/200?random=3" alt="Performance Insights" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
    </div>
    <p class="text-gray-500 mt-8 text-center text-sm">This content area demonstrates dark mode and overall integration.</p>
  </div>

  <style>
    /* Custom scrollbar for Webkit browsers */
    .scrollbar-thin::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .scrollbar-thin::-webkit-scrollbar-track {
      background: transparent;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
      background-color: #4a5568; /* gray-700 */
      border-radius: 4px;
      border: 2px solid transparent;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
      background-color: #61626c; /* slightly lighter on hover */
    }

    /* Tailwind Animation Utilities */
    @keyframes pulse-glow-red {
      0%, 100% {
        box-shadow: 0 0 0px #ef4444;
      }
      50% {
        box-shadow: 0 0 8px #ef4444, 0 0 16px #ef4444;
      }
    }
    .animate-pulse-glow-red {
        animation: pulse-glow-red 2s infinite ease-in-out;
    }

    @keyframes pulse-glow-green {
      0%, 100% {
        box-shadow: 0 0 0px #22c55e;
      }
      50% {
        box-shadow: 0 0 8px #22c55e, 0 0 16px #22c55e;
      }
    }
    .animate-pulse-glow-green {
        animation: pulse-glow-green 2s infinite ease-in-out;
    }

     @keyframes pulse-glow-purple {
      0%, 100% {
        box-shadow: 0 0 0px #a855f7;
      }
      50% {
        box-shadow: 0 0 8px #a855f7, 0 0 16px #a855f7;
      }
    }
    .animate-pulse-glow-purple {
        animation: pulse-glow-purple 2s infinite ease-in-out;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .w-64 {
            width: 56px; /* Collapsed width on mobile */
        }

        .md\:w-72 {
            width: 56px; /* Override for mobile, effectively */
        }

        .flex-col .text-2xl, .flex-col .text-base, .flex-col .text-sm, .flex-col .text-lg, .flex-col .ml-4, .flex-col .mr-3, .flex-col .px-4, .flex-col .py-3, .flex-col .h-12, .flex-col .w-12, .flex-col .h-5, .flex-col .w-5, .flex-col .px-4, .flex-col .py-6 {
            display: none; /* Hide text/padding elements when collapsed */
        }

        .flex-col .h-20 {
            height: 60px;
        }

        .flex-col .items-center.justify-center {
            justify-content: center;
        }

        .flex-col .h-20 .text-2xl {
            display: initial; /* Show title on mobile */
            font-size: 1.5rem; /* Smaller title on mobile */
            line-height: 1.75rem;
        }

        .flex-col .h-20 .text-2xl span {
            display: none;
        }

         .flex-col .h-20 h1:before {
            content: 'F'; /* Show only 'F' for the logo on mobile */
            display: block;
            color: #60a5fa;
         }

         .flex-col .h-20 h1.dark\:text-gray-50:before {
            color: #60a5fa;
         }

        .flex-col .flex-col {
            width: 56px; /* Ensure collapsed width */
        }

        .flex-col .rounded-full {
            margin: auto; /* Center avatar */
        }

        .flex-col svg {
            margin-right: 0; /* Remove margin for icons */
        }

        .flex-col .px-4.py-3 {
            padding-left:0.9rem; /* Adjust padding for icons only */
            padding-right:0.9rem;
            justify-content: center;
        }

         .flex-col .px-4.py-3 span {
             display:none; /* Hide icon text */
         }

         .flex-col .rounded-lg.bg-gray-800, .flex-col .pt-4 {
            margin-top: 0; /* Adjust spacing */
            margin-bottom: 0;
         }
         .flex-col .pt-4 .text-xs {
            display: none; /* Hide team section title on mobile */
         }
         .flex-col .h-3.w-3 {
            margin: auto; /* Center team status indicator */
         }
         .flex-col .px-4.py-6 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
         }
    }
  </style>
</div>

Composant de la barre latérale des soins de santé

Un composant de barre latérale complexe, minimaliste et réactif pour les applications de santé, doté d’une palette de couleurs analogue et d’une prise en charge du mode sombre. Comprend la navigation, le profil de l’utilisateur et les liens rapides.

Ouvrir Aperçu

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg transition-all duration-300 ease-in-out md:translate-x-0" id="sidebar">
    <!-- Sidebar Header -->
    <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center space-x-2">
        <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
        <span class="text-xl font-semibold text-gray-900 dark:text-white">MedPanel</span>
      </a>
      <!-- Mobile menu button - hidden on desktop -->
      <button type="button" class="md:hidden text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 rounded" aria-controls="sidebar" aria-expanded="false" onclick="document.getElementById('sidebar').classList.toggle('translate-x-0'); document.getElementById('sidebar').classList.toggle('-translate-x-full');">
        <span class="sr-only">Open sidebar</span>
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>

    <!-- User Profile -->
    <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
      <img class="h-12 w-12 rounded-full ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User avatar">
      <div class="ml-3">
        <p class="text-lg font-medium text-gray-900 dark:text-white">Dr. Elena Smith</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Cardiologist</p>
      </div>
    </div>

    <!-- Main Navigation -->
    <nav class="flex-1 px-2 py-4 space-y-1 overflow-y-auto">
      <a href="#" class="flex items-center p-3 rounded-lg text-indigo-700 dark:text-indigo-300 bg-indigo-100 dark:bg-indigo-700/30 font-semibold hover:bg-indigo-100 dark:hover:bg-indigo-700/50 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-6-6v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
        </svg>
        <span>Dashboard</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
        </svg>
        <span>Patients</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2zm7-9v5m-5-5h5m-5 0h.01M12 12c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z" />
        </svg>
        <span>Appointments</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
        </svg>
        <span>Records</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M10 14v10m-2-5a2 2 0 002 2h4a2 2 0 002-2m-2 0V11m0 0h2m-2 0H8m6 0h2m-2 0v5m4-5v5M7 7h.01M17 7h.01" />
        </svg>
        <span>Analytics</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
        </svg>
        <span>Messages <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">3</span></span>
      </a>
    </nav>

    <!-- Quick Links / Settings -->
    <div class="mt-auto px-2 py-4 border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
        <span>Settings</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
        </svg>
        <span>Logout</span>
      </a>
    </div>
  </div>

  <!-- Main Content Area (dummy content for layout) -->
  <main class="flex-1 p-6 md:p-8 overflow-y-auto">
    <h1 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Dashboard Overview</h1>
    <p class="text-gray-700 dark:text-gray-300">Welcome to your healthcare management system. Use the sidebar to navigate through different sections.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Upcoming Appointments</h2>
        <p class="text-gray-700 dark:text-gray-300">Dr. John Doe - Cardiology, Today 10:00 AM</p>
        <p class="text-gray-700 dark:text-gray-300">Ms. Jane Smith - Pediatrics, Tomorrow 02:30 PM</p>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Recent Patients</h2>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
          <li>Patient ID: P2023001 - <span class="font-medium">Sarah Connor</span></li>
          <li>Patient ID: P2023002 - <span class="font-medium">Kyle Reese</span></li>
        </ul>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Pending Tasks</h2>
        <p class="text-gray-700 dark:text-gray-300">Review lab results for Patient P2023001</p>
        <p class="text-gray-700 dark:text-gray-300">Update medication for Patient P2023002</p>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
    </div>
  </main>

  <!-- Overlay for mobile sidebar -->
  <div class="fixed inset-0 bg-gray-900 bg-opacity-50 z-40 md:hidden -translate-x-full transition-opacity duration-300 ease-in-out" id="sidebar-overlay" onclick="document.getElementById('sidebar').classList.toggle('translate-x-0'); document.getElementById('sidebar').classList.toggle('-translate-x-full'); document.getElementById('sidebar-overlay').classList.toggle('opacity-100'); document.getElementById('sidebar-overlay').classList.toggle('-translate-x-full');"></div>

  <script>
    // This small script is for handling the mobile sidebar open/close functionality.
    // In a real application, you'd likely use a framework or more robust JS.
    const sidebar = document.getElementById('sidebar');
    const sidebarToggleButton = document.querySelector('button[aria-controls="sidebar"]');
    const sidebarOverlay = document.getElementById('sidebar-overlay');

    sidebarToggleButton.addEventListener('click', () => {
      sidebar.classList.toggle('-translate-x-full');
      sidebarOverlay.classList.toggle('-translate-x-full');
    });

    sidebarOverlay.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full');
      sidebarOverlay.classList.add('-translate-x-full');
    });
  </script>
</div>

Neumorphic_Sidebar_Component

Un composant de barre latérale simple, réactif et neumorphe pour les sites Web d’entreprise/d’entreprise avec des couleurs complémentaires et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <aside class="flex flex-col w-64 bg-gray-100 dark:bg-gray-800 shadow-xl rounded-2xl m-4 p-4 transition-all duration-300 ease-in-out
                lg:w-72 xl:w-80
                sm:m-2 sm:rounded-xl sm:p-3
                fixed inset-y-0 left-0 transform -translate-x-full lg:static lg:translate-x-0
                peer-checked:translate-x-0 z-50
                dark:shadow-none dark:border dark:border-gray-700
                " id="sidebar">
    <!-- Sidebar Header -->
    <div class="flex items-center justify-center h-16 mb-6 p-4 rounded-xl
                bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg
                dark:from-blue-700 dark:to-indigo-800 dark:shadow-xl">
      <h1 class="text-2xl font-bold text-white">Company Name</h1>
    </div>

    <!-- Navigation Links -->
    <nav class="flex-1">
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium
                      shadow-md hover:shadow-lg
                      dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:shadow-none dark:border dark:border-gray-600">
            <svg class="w-6 h-6 mr-3 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m-3 3h3v-3m0 0h3m-3 3h3m-3 0v3m-3-3v3m-3-3h3v-3m-3 3v3m-3-3h3m-3 0v3"></path>
            </svg>
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
              </path>
            </svg>
            Analytics
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5-3.5a3 3 0 11-6 0 3 3 0 016 0zm-3-8a3 3 0 11-6 0 3 3 0 016 0z">
              </path>
            </svg>
            Customers
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h8m-11 5h12M17 19H7a2 2 0 01-2-2V5a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 01-2 2z">
              </path>
            </svg>
            Reports
          </a>
        </li>
      </ul>
    </nav>

    <!-- Dark Mode Toggle -->
    <div class="mt-8">
      <label for="dark-mode-toggle" class="relative inline-flex items-center cursor-pointer p-2 rounded-xl
                  bg-gray-100 shadow-inner
                  hover:shadow-md transition-all duration-300 ease-in-out
                  dark:bg-gray-800 dark:border dark:border-gray-700 dark:shadow-none">
        <input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')">
        <div class="flex items-center justify-between w-full">
          <span class="text-gray-600 dark:text-gray-300 font-medium mr-2">Dark Mode:</span>
          <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-700 peer-checked:bg-blue-600">
          </div>
        </div>
      </label>
    </div>

    <!-- User Profile -->
    <div class="mt-auto p-4 rounded-xl
                bg-gray-200 shadow-md
                dark:bg-gray-700 dark:shadow-inner dark:border dark:border-gray-600">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-blue-500 dark:border-blue-400 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">CEO, Company</p>
        </div>
      </div>
    </div>
  </aside>

  <!-- Overlay for small screens -->
  <label for="sidebar-toggle" class="absolute inset-0 bg-black bg-opacity-30 z-40 hidden peer-checked:block lg:hidden" aria-hidden="true"></label>

  <!-- Content Area (for demonstration, can be removed) -->
  <main class="flex-1 p-8 lg:ml-68 sm:ml-0 transition-all duration-300">
    <!-- Hidden checkbox for toggling sidebar on small screens -->
    <input type="checkbox" id="sidebar-toggle" class="hidden peer">

    <!-- Hamburger Icon for small screens -->
    <label for="sidebar-toggle" class="lg:hidden cursor-pointer absolute top-4 left-4 z-50 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 shadow-md transform transition-all duration-300 ease-in-out">
      <svg class="w-8 h-8 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
    </label>

    <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 mt-16 lg:mt-0">Main Content Area</h2>
    <p class="text-gray-700 dark:text-gray-300">This is where your main content will go. The sidebar is designed to be responsive and work across various screen sizes.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 1</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 2</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 3</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
    </div>
  </main>
</div>

Composant de la barre latérale

Un composant de barre latérale complexe, réactif, de style Glassmorphism pour un tableau de bord, avec des tons de terre et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex h-screen bg-stone-100 dark:bg-stone-900">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-4 shadow-lg md:flex">
    <div class="text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-6">Dashboard</div>
    <nav class="flex-1 space-y-2">
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l-7 7m7-7v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h2a1 1 0 001-1v-3m-6 0h6"></path></svg>
        <span>Home</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h3m-3 0h-3"></path></svg>
        <span>Analytics</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M12 20.354a4 4 0 110-5.292M12 14.354a4 4 0 110 5.292M12 8.354a4 4 0 110 5.292"></path></svg>
        <span>Reports</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
        <span>Users</span>
      </a>
    </nav>
    <div class="mt-6 flex items-center space-x-3 p-3 rounded-lg bg-white/40 dark:bg-stone-700/40">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
      <div>
        <p class="font-medium text-stone-800 dark:text-stone-100">John Doe</p>
        <a href="#" class="text-sm text-stone-600 dark:text-stone-300 hover:underline">View Profile</a>
      </div>
    </div>
  </div>

  <!-- Main Content (for demonstration purposes) -->
  <div class="flex-1 p-8 overflow-y-auto">
    <h1 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-6">Dashboard Overview</h1>
    <p class="text-stone-700 dark:text-stone-200">This is the main content area. The sidebar is a Glassmorphism-styled component with earth tones and dark mode support.</p>
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 1</h2>
        <p class="text-stone-700 dark:text-stone-200">Some content for card 1. This demonstrates a typical content area next to the sidebar.</p>
      </div>
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 2</h2>
        <p class="text-stone-700 dark:text-stone-200">More content for card 2. The design uses natural colors and provides a rich interface.</p>
      </div>
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 3</h2>
        <p class="text-stone-700 dark:text-stone-200">Final card content. The responsive design adapts to different screen sizes.</p>
      </div>
    </div>
  </div>
</div>