Search Components

Sidebar Navigation

Navigation menu positioned on the side of the page

Sidebar Navigation Component - Memphis Muted

A complex, responsive sidebar navigation component inspired by Memphis design with a muted color scheme, suitable for documentation and wiki sites. Includes dark mode support and interactive elements.

Open Preview

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

  <!-- Mobile Menu Button (Hamburger) -->
  <button id="mobile-sidebar-toggle" class="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-700 bg-gray-200 dark:text-gray-200 dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors duration-300 md:top-6 md:left-6 md:p-3">
    <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>

  <!-- Sidebar -->
  <aside id="sidebar" class="fixed inset-y-0 left-0 transform -translate-x-full lg:relative lg:translate-x-0 transition-transform duration-300 ease-in-out z-40 w-64 md:w-72 lg:w-80 overflow-y-auto bg-fuchsia-100 dark:bg-fuchsia-900 border-r-4 border-fuchsia-300 dark:border-fuchsia-700 shadow-xl lg:shadow-none">
    <div class="p-6 md:p-8 lg:p-10 border-b-4 border-fuchsia-300 dark:border-fuchsia-700 mb-6 relative">
      <h1 class="text-2xl md:text-3xl font-extrabold text-fuchsia-800 dark:text-fuchsia-100 uppercase tracking-wide relative z-10">
        <span class="relative">
          <span class="block absolute -bottom-1 -left-1 w-6 h-6 bg-amber-400 dark:bg-amber-600 rounded-bl-lg transform rotate-45"></span>
          <span class="relative">Doc</span>
        </span>
        <span class="relative ml-2">
          <span class="block absolute -top-1 -right-1 w-6 h-6 bg-lime-400 dark:bg-lime-600 rounded-tr-lg transform -rotate-45"></span>
          <span class="relative">Hub</span>
        </span>
      </h1>
      <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-0 left-1/2 -ml-8 w-16 h-16 bg-fuchsia-400 dark:bg-fuchsia-600 opacity-20 transform -rotate-30"></div>
        <div class="absolute bottom-0 right-1/4 w-10 h-10 bg-indigo-400 dark:bg-indigo-600 opacity-20 transform rotate-45"></div>
      </div>
    </div>

    <!-- Search Bar -->
    <div class="px-6 mb-6">
      <div class="relative">
        <input type="text" placeholder="Search documentation..." class="w-full py-3 pl-12 pr-4 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-700 border-b-4 border-lime-300 dark:border-lime-700 transition-all duration-300">
        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
    </div>

    <!-- Navigation Menu -->
    <nav class="px-6 pb-6 space-y-4 md:space-y-6 lg:space-y-8">
      <!-- Category 1 -->
      <div>
        <h2 class="text-xs md:text-sm font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-300 mb-4 px-3 relative">
          <span class="relative z-10">Getting Started</span>
          <span class="block absolute left-0 bottom-0 w-full h-1 bg-amber-200 dark:bg-amber-800 z-0 transform -skew-x-12"></span>
        </h2>
        <ul class="space-y-2">
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-amber-200 hover:text-amber-800 dark:hover:bg-amber-800 dark:hover:text-amber-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-amber-500 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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 class="relative z-10">Introduction</span>
              <span class="absolute inset-0 bg-gradient-to-r from-amber-100 to-amber-50 dark:from-amber-900 dark:to-amber-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-amber-200 hover:text-amber-800 dark:hover:bg-amber-800 dark:hover:text-amber-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-amber-500 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6a3 3 0 01-3-3V6zm4 6a1 1 0 110 2h3a1 1 0 110-2H7zm0-4a1 1 0 110 2h3a1 1 0 110-2H7z" clip-rule="evenodd"></path></svg>
              <span class="relative z-10">Installation Guide</span>
              <span class="absolute inset-0 bg-gradient-to-r from-amber-100 to-amber-50 dark:from-amber-900 dark:to-amber-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
        </ul>
      </div>

      <!-- Category 2 -->
      <div>
        <h2 class="text-xs md:text-sm font-semibold uppercase tracking-wider text-lime-600 dark:text-lime-300 mb-4 px-3 relative mt-6 md:mt-8">
          <span class="relative z-10">Core Concepts</span>
          <span class="block absolute left-0 bottom-0 w-full h-1 bg-lime-200 dark:bg-lime-800 z-0 transform -skew-x-12"></span>
        </h2>
        <ul class="space-y-2">
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-lime-200 hover:text-lime-800 dark:hover:bg-lime-800 dark:hover:text-lime-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-lime-500 dark:text-lime-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h.01a1 1 0 100-2H10zm3 0a1 1 0 000 2h.01a1 1 0 100-2H13zm-3 4a1 1 0 000 2h.01a1 1 0 100-2H10z" clip-rule="evenodd"></path></svg>
              <span class="relative z-10">Architecture Overview</span>
              <span class="absolute inset-0 bg-gradient-to-r from-lime-100 to-lime-50 dark:from-lime-900 dark:to-lime-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-lime-200 hover:text-lime-800 dark:hover:bg-lime-800 dark:hover:text-lime-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-lime-500 dark:text-lime-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 3a1 1 0 011-1h2a1 1 0 011 1v13a1 1 0 01-1 1h-2a1 1 0 01-1-1V3z"></path></svg>
              <span class="relative z-10">Data Models</span>
              <span class="absolute inset-0 bg-gradient-to-r from-lime-100 to-lime-50 dark:from-lime-900 dark:to-lime-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-lime-200 hover:text-lime-800 dark:hover:bg-lime-800 dark:hover:text-lime-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-lime-500 dark:text-lime-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path></svg>
              <span class="relative z-10">API Endpoints</span>
              <span class="absolute inset-0 bg-gradient-to-r from-lime-100 to-lime-50 dark:from-lime-900 dark:to-lime-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
        </ul>
      </div>

      <!-- Category 3 -->
      <div>
        <h2 class="text-xs md:text-sm font-semibold uppercase tracking-wider text-indigo-600 dark:text-indigo-300 mb-4 px-3 relative mt-6 md:mt-8">
          <span class="relative z-10">Advanced Topics</span>
          <span class="block absolute left-0 bottom-0 w-full h-1 bg-indigo-200 dark:bg-indigo-800 z-0 transform -skew-x-12"></span>
        </h2>
        <ul class="space-y-2">
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-indigo-200 hover:text-indigo-800 dark:hover:bg-indigo-800 dark:hover:text-indigo-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-indigo-500 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3a1 1 0 00-2 0v6a1 1 0 102 0V3zM14 3a1 1 0 00-2 0v6a1 1 0 102 0V3zM17 6a1 1 0 00-2 0v6a1 1 0 102 0V6zM4 9a1 1 0 00-2 0v6a1 1 0 102 0V9z"></path></svg>
              <span class="relative z-10">Performance Tuning</span>
              <span class="absolute inset-0 bg-gradient-to-r from-indigo-100 to-indigo-50 dark:from-indigo-900 dark:to-indigo-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-indigo-200 hover:text-indigo-800 dark:hover:bg-indigo-800 dark:hover:text-indigo-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-indigo-500 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 01-1.44-8.834 5 5 0 018.303-7.682 4.5 4.5 0 011.453 8.834L18 18.5a1 1 0 01-1.707.707L15.243 17H5.5z" clip-rule="evenodd"></path></svg>
              <span class="relative z-10">Security Best Practices</span>
              <span class="absolute inset-0 bg-gradient-to-r from-indigo-100 to-indigo-50 dark:from-indigo-900 dark:to-indigo-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- User Profile / Footer - Memphis Inspired -->
    <div class="mt-auto p-6 md:p-8 border-t-4 border-fuchsia-300 dark:border-fuchsia-700 relative">
      <div class="flex items-center space-x-4">
        <img class="w-12 h-12 rounded-full ring-4 ring-indigo-400 dark:ring-indigo-600 transition-all duration-300 transform hover:scale-105" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User avatar">
        <div>
          <p class="text-gray-800 dark:text-gray-100 font-semibold">Jane Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Editor</p>
        </div>
      </div>
      <div class="mt-4 flex justify-between items-center">
        <a href="#" class="text-fuchsia-700 dark:text-fuchsia-300 hover:text-fuchsia-900 dark:hover:text-fuchsia-100 text-sm font-medium transition-colors duration-200">
          Settings
          <span class="inline-block w-2 h-2 ml-1 bg-lime-400 dark:bg-lime-600 rounded-full transform rotate-45"></span>
        </a>
        <button class="p-2 rounded-full bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 hover:bg-amber-300 dark:hover:bg-amber-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10 0a1 1 0 00-1 1v4a1 1 0 102 0V4a1 1 0 00-1-1zM16 3a1 1 0 00-1 1v8a1 1 0 102 0V4a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
      <div class="absolute -bottom-4 right-0 w-16 h-1 bg-indigo-400 dark:bg-indigo-600 transform skew-x-30 origin-right"></div>
    </div>

  </aside>

  <!-- Main Content Area (for demonstration, not part of the component itself) -->
  <main class="flex-1 p-8 lg:p-10 transition-all duration-300">
    <h2 class="text-4xl font-extrabold text-fuchsia-700 dark:text-fuchsia-200 mb-6">Welcome to the Documentation</h2>
    <p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
      This is a placeholder for your main content. The sidebar navigation on the left provides quick access to different sections and topics.
      The design incorporates a muted Memphis style with geometric shapes and bold accents.
    </p>
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-fuchsia-50 dark:bg-fuchsia-950 p-6 rounded-xl shadow-md border-2 border-fuchsia-200 dark:border-fuchsia-800 relative overflow-hidden">
        <h3 class="text-2xl font-bold text-amber-700 dark:text-amber-300 mb-3">Guides</h3>
        <p class="text-gray-700 dark:text-gray-300">Detailed instructions and tutorials to get you started and beyond.</p>
        <span class="absolute -top-4 -right-4 w-12 h-12 bg-amber-300 dark:bg-amber-700 rounded-full opacity-60 transform rotate-12"></span>
      </div>
      <div class="bg-fuchsia-50 dark:bg-fuchsia-950 p-6 rounded-xl shadow-md border-2 border-fuchsia-200 dark:border-fuchsia-800 relative overflow-hidden">
        <h3 class="text-2xl font-bold text-lime-700 dark:text-lime-300 mb-3">API Reference</h3>
        <p class="text-gray-700 dark:text-gray-300">Comprehensive documentation for all available API endpoints and models.</p>
        <span class="absolute -bottom-4 -left-4 w-12 h-12 bg-lime-300 dark:bg-lime-700 rounded-full opacity-60 transform -rotate-12"></span>
      </div>
    </div>
  </main>

</div>

<script>
  // Basic JavaScript for mobile sidebar toggle
  document.addEventListener('DOMContentLoaded', function() {
    const sidebar = document.getElementById('sidebar');
    const toggleButton = document.getElementById('mobile-sidebar-toggle');

    toggleButton.addEventListener('click', function() {
      sidebar.classList.toggle('-translate-x-full');
    });

    // Close sidebar if clicking outside on mobile
    document.addEventListener('click', function(event) {
      if (!sidebar.contains(event.target) && !toggleButton.contains(event.target) && window.innerWidth < 1024) {
        sidebar.classList.add('-translate-x-full');
      }
    });

    // Close sidebar on resize if it's open on mobile and becomes desktop
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 1024 && sidebar.classList.contains('-translate-x-full')) {
        sidebar.classList.remove('-translate-x-full');
      }
    });
  });

  // Dark mode toggle (example - you'd likely have a dedicated button/
  // This is just to demonstrate dark mode styling
  /*
  document.documentElement.classList.add('dark');
  // Or to remove:
  // document.documentElement.classList.remove('dark');
  */
</script>

Sidebar Navigation Component - Agriculture/Farming

A complex, minimalist sidebar navigation component designed for agriculture/farming websites. Features jewel-tone colors, full responsiveness, dark mode support, and multiple interactive elements suitable for dashboards and management systems in farming contexts.

Open Preview

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

  <!-- Overlay for mobile when sidebar is open -->
  <div class="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden hidden" id="sidebar-overlay"></div>

  <!-- Sidebar -->
  <aside class="w-64 bg-gradient-to-br from-emerald-600 to-emerald-800 dark:from-emerald-800 dark:to-emerald-950 text-white p-4 space-y-6 flex flex-col transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out z-40 lg:relative" id="sidebar">

    <!-- Sidebar Header / Logo -->
    <div class="flex items-center justify-between pb-4 border-b border-emerald-500 dark:border-emerald-700">
      <a href="#" class="flex items-center space-x-2 text-2xl font-bold tracking-wider text-white">
        <svg class="w-8 h-8" 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 3v14m-7 0h14a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
        </svg>
        <span>FarmFlow</span>
      </a>
      <button id="close-sidebar" class="lg:hidden text-white focus:outline-none">
        <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>

    <!-- Navigation Links -->
    <nav class="flex-1 space-y-2">
      <a href="#dashboard" class="flex items-center space-x-3 p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group active:bg-emerald-700 dark:active:bg-emerald-900">
        <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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 2m0 0l7 7m-7-7v10a1 1 0 01-1 1h-3m-6 0v-9a1 1 0 00-1-1H9a1 1 0 00-1 1v9m-6 0h6m6 0h6"></path>
        </svg>
        <span class="font-medium">Dashboard</span>
      </a>

      <a href="#fields" class="flex items-center space-x-3 p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group">
        <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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 14v6m-3-3h6m-10 0H4M7 10h10M4 7h16.71M4 20h16.71M6 14v6m-3-3h6"></path>
        </svg>
        <span class="font-medium">Fields & Crops</span>
      </a>

      <div x-data="{ open: false }" class="relative">
        <button @click="open = !open" class="flex items-center justify-between w-full p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group focus:outline-none">
          <div class="flex items-center space-x-3">
            <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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>
            <span class="font-medium">Inventory</span>
          </div>
          <svg :class="{ 'rotate-90': open, '': !open }" class="w-4 h-4 transform transition-transform 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 5l7 7-7 7"></path>
          </svg>
        </button>
        <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform scale-y-95" x-transition:enter-end="opacity-100 transform scale-y-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 transform scale-y-100" x-transition:leave-end="opacity-0 transform scale-y-95" class="ml-4 mt-1 space-y-1 text-sm" style="display: none;">
          <a href="#seeds" class="flex items-center space-x-2 p-2 rounded-md text-emerald-200 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200">
            <span class="w-1 h-1 bg-emerald-300 rounded-full"></span>
            <span>Seeds & Fertilizers</span>
          </a>
          <a href="#equipment" class="flex items-center space-x-2 p-2 rounded-md text-emerald-200 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200">
            <span class="w-1 h-1 bg-emerald-300 rounded-full"></span>
            <span>Equipment</span>
          </a>
        </div>
      </div>
      
      <a href="#weather" class="flex items-center space-x-3 p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group">
        <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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 15a4 4 0 004 4h9a5 5 0 005-5V7a2 2 0 00-2-2H5a2 2 0 00-2 2v8z"></path>
        </svg>
        <span class="font-medium">Weather Forecast</span>
      </a>

      <a href="#reports" class="flex items-center space-x-3 p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group">
        <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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 17v-2m3 2v-4m3 2v-6m2 10H7a2 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>
        <span class="font-medium">Reports & Analytics</span>
      </a>

      <a href="#settings" class="flex items-center space-x-3 p-3 rounded-lg text-emerald-100 hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200 group">
        <svg class="w-6 h-6 text-emerald-200 group-hover:text-white transition 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>
        <span class="font-medium">Settings</span>
      </a>
    </nav>

    <!-- User Profile / Footer -->
    <div class="mt-auto pt-6 border-t border-emerald-500 dark:border-emerald-700">
        <div class="flex items-center space-x-3 p-3 rounded-lg hover:bg-emerald-700 dark:hover:bg-emerald-900 transition duration-200">
            <img class="w-10 h-10 rounded-full border-2 border-emerald-300 dark:border-emerald-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div class="flex-1">
                <p class="text-white font-semibold">John Wick</p>
                <p class="text-emerald-200 text-sm">Farm Manager</p>
            </div>
            <button class="text-emerald-200 hover:text-white focus:outline-none">
                <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="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>
            </button>
        </div>
    </div>

  </aside>

  <!-- Main Content Area (example) -->
  <main class="flex-1 p-6 md:p-8 overflow-y-auto">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Dashboard Overview</h1>
      <button id="open-sidebar" class="lg:hidden text-gray-600 dark:text-gray-300 focus:outline-none">
        <svg class="w-8 h-8" 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>
    </div>

    <!-- Content Grid Example -->
    <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 p-6">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Field Status</h2>
        <p class="text-gray-600 dark:text-gray-400">Monitor the health and growth of your crops.</p>
        <img src="https://picsum.photos/400/250?random=1" alt="Field" class="mt-4 rounded-md">
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Upcoming Tasks</h2>
        <ul class="list-disc list-inside text-gray-600 dark:text-gray-400">
          <li>Harvest corn - Oct 25</li>
          <li>Fertilize wheat - Oct 28</li>
          <li>Pest control - Nov 01</li>
        </ul>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Weather Alert</h2>
        <p class="text-gray-600 dark:text-gray-400">Heavy rainfall expected tomorrow. Prepare irrigation systems.</p>
        <img src="https://picsum.photos/400/250?random=2" alt="Weather" class="mt-4 rounded-md">
      </div>
    </div>
  </main>

</div>

<!-- Alpine.js for dropdowns and sidebar toggle -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const sidebar = document.getElementById('sidebar');
    const openSidebarBtn = document.getElementById('open-sidebar');
    const closeSidebarBtn = document.getElementById('close-sidebar');
    const sidebarOverlay = document.getElementById('sidebar-overlay');

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

    openSidebarBtn.addEventListener('click', toggleSidebar);
    closeSidebarBtn.addEventListener('click', toggleSidebar);
    sidebarOverlay.addEventListener('click', toggleSidebar);

    // Dark mode toggle (basic example, typically managed by a separate script/local storage)
    // For demonstration, you can manually toggle 'dark' class on the html tag for testing
    // Add a button in your main content or header to toggle this class if needed.
  });

  // To make dark mode persistent, you'd typically add a JS snippet like this:
  // if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  //   document.documentElement.classList.add('dark')
  // } else {
  //   document.documentElement.classList.remove('dark')
  // }
  // // Whenever the user explicitly chooses light mode
  // localStorage.theme = 'light'
  // // Whenever the user explicitly chooses dark mode
  // localStorage.theme = 'dark'
  // // Whenever the user explicitly chooses to respect the OS preference
  // localStorage.removeItem('theme')
</script>

Organic_Nature_Sepia_Healthcare_Sidebar_Navigation_Component

A simple, responsive sidebar navigation component with an organic, nature-inspired design using sepia/brown tones, suitable for healthcare and medical applications. Includes dark mode support.

Open Preview

                <div class="flex h-screen bg-gradient-to-br from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-950 font-sans">

  <!-- Mobile Toggle (hidden on desktop) -->
  <input type="checkbox" id="menu-toggle" class="hidden peer/menu" />
  <label for="menu-toggle" class="absolute top-4 left-4 z-40 p-2 rounded-lg bg-stone-300 text-stone-700 md:hidden cursor-pointer dark:bg-stone-700 dark:text-stone-300 transition-colors duration-300">
    <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 12h16m-7 6h7"></path></svg>
  </label>

  <!-- Sidebar -->
  <aside class="fixed top-0 left-0 h-full w-64 p-4 z-30 transform -translate-x-full md:relative md:translate-x-0 transition-transform duration-500 ease-in-out bg-stone-200 dark:bg-stone-800 border-r border-stone-300 dark:border-stone-700 peer-checked/menu:translate-x-0 overflow-y-auto shadow-lg md:rounded-tr-lg md:rounded-br-lg md:shadow-xl">
    <div class="flex items-center mb-8 justify-center lg:justify-start">
      <div class="w-12 h-12 rounded-full bg-amber-600 flex items-center justify-center text-white text-2xl font-bold mr-3 shadow-md">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
      </div>
      <span class="text-2xl font-semibold text-stone-800 dark:text-stone-100 hidden lg:block">MedFlow</span>
    </div>

    <nav class="space-y-3">
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>
        <span class="font-medium">Dashboard</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-4 0c1.66 0 2.99-1.34 2.99-3S13.66 5 12 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-4 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3z"></path></svg>
        <span class="font-medium">Patients</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 19c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zM7 19c-1.1 0-1.99.9-1.99 2S5.9 23 7 23s2-.9 2-2-.9-2-2-2zm8-14H7V3H5v2H3l.01 14H5c0 1.1.9 2 2 2s2-.9 2-2h6c1.1 0 2 .9 2 2s.9 2 2 2 2-.9 2-2h2v-4.5c0-.85-.34-1.66-.99-2.25L17 9V5h-2z"></path></svg>
        <span class="font-medium">Appointments</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 14v-2h-6V4h-2v8H5v2h6v6h2v-6h6z"></path></svg>
        <span class="font-medium">Procedures</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2s-2 .9-2 2v6c0 1.1.9 2 2 2zM18 10v1c0 2.21-1.79 4-4 4h-4c-2.21 0-4-1.79-4-4v-1h2v1c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-1h2V7h-2V5c0-1.1-.9-2-2-2s-2 .9-2 2v2H8V5c0-.55-.45-1-1-1s-1 .45-1 1v2H4V4c0-1.1-.9-2-2-2S0 3 0 4v9c0 3.31 2.69 6 6 6h2v-2h4v2h2v-2h2v2h2c3.31 0 6-2.69 6-6V7h-2v3h-2z"></path></svg>
        <span class="font-medium">Billing</span>
      </a>
      <div class="border-t border-stone-300 dark:border-stone-700 my-4"></div>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z"></path></svg>
        <span class="font-medium">Pharmacy</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
        <span class="font-medium">Information</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 12h-1V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v8H5c-1.66 0-3 1.34-3 3v2c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-2c0-1.66-1.34-3-3-3zm-3 0H8V4h8v8zm-2 5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path></svg>
        <span class="font-medium">Settings</span>
      </a>
    </nav>

    <!-- User Profile or Logout -->
    <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-center lg:justify-start">
      <img class="w-10 h-10 rounded-full mr-3 border-2 border-amber-500 dark:border-amber-400 object-cover shadow-sm" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="hidden lg:block">
        <p class="text-stone-800 dark:text-stone-100 font-semibold text-sm">Dr. John Doe</p>
        <p class="text-stone-600 dark:text-stone-400 text-xs">Physician</p>
      </div>
      <a href="#" class="ml-auto p-2 rounded-full text-stone-600 hover:bg-stone-300 dark:text-stone-400 dark:hover:bg-stone-700 transition-colors duration-200 hidden md:block" aria-label="Sign out"> 
        <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H5a3 3 0 01-3-3v-10a3 3 0 013-3h5a3 3 0 013 3v1"></path></svg>
      </a>
    </div>
  </aside>

  <!-- Main Content Area (for demonstration) -->
  <main class="flex-1 p-6 md:p-8 overflow-auto dark:text-stone-200">
    <h1 class="text-3xl font-semibold mb-6 text-stone-800 dark:text-stone-100">Welcome to Dashboard</h1>
    <p class="text-stone-700 dark:text-stone-300 mb-4">This is the main content area. You can place your application's primary content here. The sidebar is designed to provide seamless navigation.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-stone-100 dark:bg-stone-700 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Latest Patients</h2>
        <p class="text-stone-600 dark:text-stone-300">View recent patient registrations and updates.</p>
      </div>
      <div class="bg-stone-100 dark:bg-stone-700 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Appointment Schedule</h2>
        <p class="text-stone-600 dark:text-stone-300">Manage today's and upcoming appointments.</p>
      </div>
      <div class="bg-stone-100 dark:bg-stone-700 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Medical Records</h2>
        <p class="text-stone-600 dark:text-stone-300">Access and update patient medical histories.</p>
      </div>
    </div>
    <div class="mt-8">
      <img src="https://picsum.photos/800/400?grayscale&blur=2" alt="Organic medical illustration" class="rounded-lg shadow-lg w-full object-cover max-h-64">
    </div>
  </main>
</div>

Gaming_Sidebar_Navigation_Component

A responsive sidebar navigation component for gaming websites, featuring a monospace/developer-inspired design with high contrast, dark mode support, and interactive elements. Ideal for game interfaces and community portals.

Open Preview

                <div class="min-h-screen bg-gray-50 font-mono text-gray-900 dark:bg-gray-950 dark:text-gray-50">
  <div class="flex flex-col md:flex-row">
    <!-- Sidebar -->
    <div class="fixed inset-0 z-40 h-full w-64 transform -translate-x-full overflow-y-auto bg-gray-800 p-6 shadow-lg transition-all duration-300 ease-in-out dark:bg-gray-900 md:relative md:w-64 md:translate-x-0" id="sidebar">
      <div class="flex items-center justify-between">
        <h2 class="text-2xl font-bold uppercase text-green-400">// GAMING_UI</h2>
        <button class="text-gray-400 focus:outline-none md:hidden" onclick="document.getElementById('sidebar').classList.toggle('-translate-x-full')">
          <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="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>

      <nav class="mt-10 space-y-4">
        <a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
          <svg class="mr-3 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="M9.75 17L9 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
          </svg>
          <span>// DASHBOARD</span>
        </a>
        <a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
          <svg class="mr-3 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="M11 4a2 2 0 10-4 0v12a2 2 0 104 0V4zm1 0a2 2 0 10-4 0v12a2 2 0 104 0V4zm0 8a2 2 0 10-4 0v4a2 2 0 104 0v-4z"></path>
          </svg>
          <span>// GAMES_LIBRARY</span>
        </a>
        <a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
          <svg class="mr-3 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="M17 20h2a2 2 0 002-2V8a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V3"></path>
          </svg>
          <span>// DOWNLOADS</span>
        </a>
        <a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
          <svg class="mr-3 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.292M15 21H3v-1a6 6 0 0112 0v1zm-6-9a4 4 0 100-8 4 4 0 000 8zm7-2a2 2 0 11-4 0 2 2 0 014 0zM18 10a2 2 0 10-4 0 2 2 0 004 0z"></path>
          </svg>
          <span>// FRIENDS_LIST</span>
        </a>
        <div class="relative">
          <button onclick="document.getElementById('community-dropdown').classList.toggle('hidden')" class="flex w-full items-center justify-between rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
            <div class="flex items-center">
              <svg class="mr-3 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
              <span>// COMMUNITY</span>
            </div>
            <svg class="h-4 w-4 transform transition-transform duration-300 ease-in-out" 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="M19 9l-7 7-7-7"></path>
            </svg>
          </button>
          <div id="community-dropdown" class="absolute left-full top-0 ml-2 hidden w-48 rounded-md bg-gray-700 py-2 shadow-lg dark:bg-gray-800">
            <a href="#" class="block px-4 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">// FORUMS</a>
            <a href="#" class="block px-4 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">// NEWS</a>
            <a href="#" class="block px-4 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">// LIVE_STREAMS</a>
          </div>
        </div>
        <a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
          <svg class="mr-3 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.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>// SETTINGS</span>
        </a>
      </nav>

      <div class="mt-10 border-t border-gray-700 pt-6 text-sm text-gray-400">
        <p>// USER_PROFILE</p>
        <div class="mt-4 flex items-center">
          <img class="h-10 w-10 rounded-full border-2 border-green-500 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="ml-3">
            <p class="font-bold text-white">_PLAYER_ONE_</p>
            <p class="text-xs text-gray-400">// ONLINE</p>
          </div>
        </div>
        <button class="mt-4 w-full rounded-md bg-red-600 px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800">
          // LOGOUT
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="ml-0 flex-1 p-6 transition-all duration-300 ease-in-out md:ml-64">
      <!-- Top Bar for mobile menu toggle -->
      <div class="mb-6 flex items-center justify-between md:hidden">
        <h1 class="text-2xl font-bold uppercase text-green-500">// CONSOLE_LOG</h1>
        <button class="text-gray-900 dark:text-gray-50 focus:outline-none" onclick="document.getElementById('sidebar').classList.toggle('-translate-x-full')">
          <svg class="h-8 w-8" 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>
      </div>

      <h1 class="text-3xl font-bold uppercase text-green-500 md:block hidden">// DASHBOARD_OVERVIEW</h1>

      <div class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <!-- Card 1 -->
        <div class="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
          <h3 class="text-xl font-semibold uppercase text-blue-500">// ACTIVE_GAMES</h3>
          <p class="mt-4 text-gray-700 dark:text-gray-300">_STATUS: LOADING_GAME_DATA...</p>
          <div class="mt-4 space-y-3">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/19/50/50" alt="Game Icon">
              <span class="ml-3 text-gray-800 dark:text-gray-200">GAME_TITLE_XYZ // PLAYING</span>
            </div>
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/20/50/50" alt="Game Icon">
              <span class="ml-3 text-gray-800 dark:text-gray-200">ANOTHER_GAME // PAUSED</span>
            </div>
          </div>
        </div>

        <!-- Card 2 -->
        <div class="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
          <h3 class="text-xl font-semibold uppercase text-red-500">// RECENT_ACTIVITY</h3>
          <ul class="mt-4 space-y-2 text-gray-700 dark:text-gray-300">
            <li><span class="text-yellow-500">_LOG:</span> GAME_XYZ achieved PLATINUM_RANK.</li>
            <li><span class="text-yellow-500">_LOG:</span> Download completed: PATCH_V1.2.</li>
            <li><span class="text-yellow-500">_LOG:</span> Joined 'ELITE_SQUAD' guild.</li>
          </ul>
        </div>

        <!-- Card 3 -->
        <div class="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
          <h3 class="text-xl font-semibold uppercase text-purple-500">// MESSAGES</h3>
          <div class="mt-4 space-y-3">
            <div class="flex items-center">
              <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
              <div class="ml-3">
                <p class="font-semibold text-gray-800 dark:text-gray-200">_SPECTRA_</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">"GG, well played!"</p>
              </div>
            </div>
            <div class="flex items-center">
              <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
              <div class="ml-3">
                <p class="font-semibold text-gray-800 dark:text-gray-200">_CODE_BREAKER_</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">"New mission available."</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- No extra JS, just simple toggles managed via inline onclick for demonstration -->
<script>
  // This script is only for the sidebar toggle on small screens and dropdowns.
  // In a real application, you might use a framework or more robust JS.
  document.addEventListener('DOMContentLoaded', () => {
    const sidebar = document.getElementById('sidebar');
    const dropdownButton = document.querySelector('#community-dropdown').previousElementSibling;
    const dropdownMenu = document.getElementById('community-dropdown');

    // Close sidebar when clicking outside on mobile
    document.addEventListener('click', (event) => {
      if (!sidebar.contains(event.target) && !event.target.closest('button')) {
        if (!sidebar.classList.contains('-translate-x-full')) {
          sidebar.classList.add('-translate-x-full');
        }
      }
    });

    // Handle dropdown toggle for community
    dropdownButton.addEventListener('click', (event) => {
      event.stopPropagation(); // Prevent click from bubbling to document and closing sidebar
      dropdownMenu.classList.toggle('hidden');
      dropdownButton.querySelector('svg:last-child').classList.toggle('rotate-180');
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', (event) => {
      if (!dropdownMenu.contains(event.target) && !dropdownButton.contains(event.target)) {
        dropdownMenu.classList.add('hidden');
        dropdownButton.querySelector('svg:last-child').classList.remove('rotate-180');
      }
    });
  });
</script>

Sidebar Navigation Component

A simple, responsive sidebar navigation component with an industrial design style, warm neutral color scheme, and dark mode support, suitable for cryptocurrency/blockchain applications.

Open Preview

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

  <!-- Desktop/Tablet Sidebar -->
  <aside class="hidden md:flex flex-col w-64 bg-gray-200 dark:bg-zinc-800 border-r border-gray-300 dark:border-zinc-700 shadow-md transition-all duration-300 ease-in-out">
    <div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-zinc-700 border-b border-gray-400 dark:border-zinc-600">
      <span class="text-xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-100">CryptoDeck</span>
    </div>
    <nav class="flex-1 p-4 overflow-y-auto">
      <ul class="space-y-2">
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 10v11l6-2 6 2 6-2V10M3 10a2 2 0 012-2h14a2 2 0 012 2M3 10v7a2 2 0 002 2h14a2 2 0 002-2v-7m-4-6a2 2 0 00-2-2h-4a2 2 0 00-2 2v2a2 2 0 002 2h4a2 2 0 002-2V4z"></path></svg>
            <span class="text-sm font-medium">Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 2z"></path></svg>
            <span class="text-sm font-medium">Wallets</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
            <span class="text-sm font-medium">Trades</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 19V6l12-3v13M9 19Cc-3.732 0-6 2.5-6 2.5V3c0-1.105.895-2 2-2h10c1.725 0 3-1 3-1L23 5v16.5C23 18.27 20 20 20 20S9 19 9 19z"></path></svg>
            <span class="text-sm font-medium">Market</span>
          </a>
        </li>
         <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98Zm-5.32 8.5a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM5.5 10a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM12 18a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2z"><!-- Placeholder Icon --></path></svg>
            <span class="text-sm font-medium">Analytics</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="text-sm font-medium">Settings</span>
          </a>
        </li>
      </ul>
    </nav>

    <div class="p-4 border-t border-gray-300 dark:border-zinc-700">
      <div class="flex items-center mb-2">
        <img class="w-8 h-8 rounded-full mr-3 border-2 border-gray-400 dark:border-zinc-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-200">John Doe</span>
      </div>
      <button class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-100 bg-gray-300 dark:bg-zinc-700 hover:bg-gray-400 dark:hover:bg-zinc-600 rounded-md transition-colors duration-200 ease-in-out shadow-sm">
        <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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
        Sign Out
      </button>
    </div>
  </aside>

  <!-- Main Content Area - Placeholder for context -->
  <main class="flex-1 p-6 md:p-8 overflow-y-auto">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6">Dashboard Overview</h1>
    <p class="text-gray-700 dark:text-gray-300">Welcome to your CryptoDeck dashboard. Use the sidebar to navigate.</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-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Wallet Balance</h2>
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-50">$12,345.67</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">+2.5% in last 24h</p>
      </div>
      <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Recent Transactions</h2>
        <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
          <li>BTC Buy: +0.01 ($450)</li>
          <li>ETH Sell: -0.5 ($1200)</li>
          <li>ADA Staked: +100</li>
        </ul>
      </div>
      <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Market Trends</h2>
        <img class="w-full h-32 object-cover rounded-md" src="https://picsum.photos/300/200?random=1" alt="Market Trend Chart">
      </div>
    </div>
  </main>

  <style>
    /* This is a simple toggle emulation for demonstration. 
       In a real app, use JS to toggle 'dark' class on 'html' or 'body'. */
    .dark-mode-toggle {
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      background-color: #fca5a5; /* Example: light-red-300 */
      color: black;
      padding: 0.5rem 1rem;
      border-radius: 9999px; /* Full rounded */
      cursor: pointer;
      z-index: 1000;
      font-size: 0.875rem;
      line-height: 1.25rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      border: 1px solid #dc2626; /* Example: Red-600 */
    }
    .dark .dark-mode-toggle {
      background-color: #6d28d9; /* Example: Violet-700 */
      color: white;
      border-color: #8b5cf6; /* Example: Violet-500 */
    }

     /* Mobile menu button animation */
    .mobile-menu-button.active svg:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    .mobile-menu-button.active svg:nth-child(2) {
      opacity: 0;
    }
    .mobile-menu-button.active svg:nth-child(3) {
      transform: rotate(-45deg) translate(6px, -6px);
    }

     @media (max-width: 767px) {
      .mobile-menu-container {
        transform: translateX(-100%);
      }
      .mobile-menu-container.open {
        transform: translateX(0);
      }
    }
  </style>

  <!-- Mobile Menu Button - Fixed bottom left -->
  <button aria-label="Toggle Mobile Menu" class="md:hidden fixed bottom-4 left-4 p-3 bg-gray-300 dark:bg-gradient-to-br dark:from-zinc-700 dark:to-zinc-900 text-gray-800 dark:text-gray-100 rounded-lg shadow-lg z-50 transition-all duration-300 ease-in-out border border-gray-400 dark:border-zinc-700 mobile-menu-button">
    <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>

  <!-- Mobile Sidebar (Off-canvas) -->
  <div class="mobile-menu-container fixed inset-y-0 left-0 w-64 bg-gray-200 dark:bg-zinc-800 border-r border-gray-300 dark:border-zinc-700 shadow-xl z-40 transform -translate-x-full md:hidden transition-transform duration-300 ease-in-out" role="dialog" aria-modal="true" aria-label="Mobile Navigation">
    <div class="flex items-center justify-between h-16 bg-gray-300 dark:bg-zinc-700 border-b border-gray-400 dark:border-zinc-600 px-4">
      <span class="text-xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-100">CryptoDeck</span>
      <button aria-label="Close Menu" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50 mobile-menu-close-button">
        <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="flex-1 p-4 overflow-y-auto">
      <ul class="space-y-2">
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 10v11l6-2 6 2 6-2V10M3 10a2 2 0 012-2h14a2 2 0 012 2M3 10v7a2 2 0 002 2h14a2 2 0 002-2v-7m-4-6a2 2 0 00-2-2h-4a2 2 0 00-2 2v2a2 2 0 002 2h4a2 2 0 002-2V4z"></path></svg>
            <span class="text-sm font-medium">Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 2z"></path></svg>
            <span class="text-sm font-medium">Wallets</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group active:bg-gray-400 dark:active:bg-zinc-600">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
            <span class="text-sm font-medium">Trades</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 19V6l12-3v13M9 19Cc-3.732 0-6 2.5-6 2.5V3c0-1.105.895-2 2-2h10c1.725 0 3-1 3-1L23 5v16.5C23 18.27 20 20 20 20S9 19 9 19z"></path></svg>
            <span class="text-sm font-medium">Market</span>
          </a>
        </li>
         <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM5.32 8.5a.5.5 0 00-.707.707l-2 2a.5.5 0 00.707.707l2-2zM5.5 10a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM12 18a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2z"/></svg>
            <span class="text-sm font-medium">Analytics</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="text-sm font-medium">Settings</span>
          </a>
        </li>
      </ul>
    </nav>

    <div class="p-4 border-t border-gray-300 dark:border-zinc-700">
      <div class="flex items-center mb-2">
        <img class="w-8 h-8 rounded-full mr-3 border-2 border-gray-400 dark:border-zinc-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-200">John Doe</span>
      </div>
      <button class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-100 bg-gray-300 dark:bg-zinc-700 hover:bg-gray-400 dark:hover:bg-zinc-600 rounded-md transition-colors duration-200 ease-in-out shadow-sm">
        <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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
        Sign Out
      </button>
    </div>
  </div>

  <!-- Overlay for mobile menu -->
  <div class="overlay fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden"></div>

  <script>
    // Basic JavaScript for toggling dark mode (for demonstration)
    const toggleDarkMode = () => {
      document.documentElement.classList.toggle('dark');
    };

    // Add a button to toggle dark mode (for demo purposes)
    document.addEventListener('DOMContentLoaded', () => {
      const darkToggleBtn = document.createElement('button');
      darkToggleBtn.className = 'dark-mode-toggle';
      darkToggleBtn.textContent = 'Toggle Dark Mode';
      darkToggleBtn.onclick = toggleDarkMode;
      document.body.appendChild(darkToggleBtn);

      // Mobile menu functionality
      const mobileMenuButton = document.querySelector('.mobile-menu-button');
      const mobileMenuContainer = document.querySelector('.mobile-menu-container');
      const mobileMenuCloseButton = document.querySelector('.mobile-menu-close-button');
      const overlay = document.querySelector('.overlay');

      const openMenu = () => {
        mobileMenuContainer.classList.add('open');
        overlay.classList.remove('hidden');
      };

      const closeMenu = () => {
        mobileMenuContainer.classList.remove('open');
        overlay.classList.add('hidden');
      };

      mobileMenuButton.addEventListener('click', openMenu);
      mobileMenuCloseButton.addEventListener('click', closeMenu);
      overlay.addEventListener('click', closeMenu);

      // Close menu on desktop resize if open
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768 && mobileMenuContainer.classList.contains('open')) {
          closeMenu();
        }
      });
    });
  </script>
</div>

Sidebar Navigation Component

A complex, responsive sidebar navigation component for a marketplace UI, featuring vibrant colors and dark mode support. Includes multiple sections, interactive elements, and user profile.

Open Preview

                <div class="flex h-screen bg-gray-950 text-gray-50 dark:bg-gray-950 dark:text-gray-50">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-gray-900 border-r border-gray-800 shadow-xl dark:bg-gray-900 dark:border-gray-800 transition-all duration-300 ease-in-out sm:w-64 md:w-64 lg:w-64">
    <div class="flex items-center justify-between h-16 px-6 border-b border-gray-800 dark:border-gray-800">
      <span class="text-2xl font-bold text-yellow-400 dark:text-yellow-400">MarketPulse</span>
      <!-- Mobile menu button for collapsing / expanding if needed for smaller screens -->
      <button class="flex items-center justify-center p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-inset focus:ring-yellow-500 lg:hidden">
        <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>

    <div class="flex-1 overflow-y-auto pt-4 pb-8">
      <nav class="mt-4 space-y-2">
        <!-- Main Navigation -->
        <h3 class="px-6 uppercase text-xs font-semibold text-gray-400 mb-2">Dashboard</h3>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-yellow-400" 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-13 13v-3a1 1 0 011-1h6a1 1 0 011 1v3m-6 3h6a2 2 0 002-2v-7a2 2 0 00-2-2H9a2 2 0 00-2 2v7a2 2 0 002 2z" />
          </svg>
          Home
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 110 18 9 9 0 010-18zm-2 9l2 2 4-4" />
          </svg>
          Orders
          <span class="ml-auto bg-purple-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full dark:bg-purple-600">5</span>
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2a3 3 0 01-3-2c0-1.105 1.343-2 3-2zM3 12s2 5 9 5 9-5 9-5H3z" />
          </svg>
          Products
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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" />
          </svg>
          Payments
        </a>

        <!-- Marketplace Tools -->
        <h3 class="px-6 uppercase text-xs font-semibold text-gray-400 mt-6 mb-2">Market Tools</h3>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
          </svg>
          Listings
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-orange-400" 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>
          Messages
          <span class="ml-auto bg-orange-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full dark:bg-orange-600">99+</span>
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
          Analytics
        </a>

        <!-- Settings & Support -->
        <h3 class="px-6 uppercase text-xs font-semibold text-gray-400 mt-6 mb-2">Account</h3>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.51-.129 1.05-.129 1.56 0A7.5 7.5 0 0121 12a7.5 7.5 0 01-9.675 7.683A7.5 7.5 0 013 12a7.5 7.5 0 017.325-7.683z" />
          </svg>
          Settings
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9.247a1 1 0 011.004-1.127l2.164.216a1 1 0 00.957-.456l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 01-1.01-.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308zM12 15a3 3 0 100-6 3 3 0 000 6z" />
          </svg>
          Support
        </a>
      </nav>
    </div>

    <!-- User Profile/Settings at bottom -->
    <div class="flex items-center px-6 py-4 border-t border-gray-800 dark:border-gray-800">
      <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-yellow-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
      <div>
        <p class="text-sm font-semibold text-white">Jane Doe</p>
        <p class="text-xs text-gray-400">Vendor Account</p>
      </div>
      <button type="button" class="ml-auto p-2 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-gray-900">
        <svg class="h-6 w-6 text-gray-400 hover:text-white" 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>
      </button>
    </div>

  </div>

  <!-- Main Content Area Placeholder -->
  <div class="flex-1 flex flex-col">
    <header class="flex items-center justify-between h-16 px-6 border-b border-gray-800 dark:border-gray-800 bg-gray-950 dark:bg-gray-950">
      <h1 class="text-xl font-semibold text-white">Overview Dashboard</h1>
      <div class="flex items-center space-x-4">
        <button class="p-2 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 rounded-md">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.405L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </button>
        <button class="p-2 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 rounded-md">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        </button>
      </div>
    </header>

    <main class="flex-1 overflow-y-auto p-6 bg-gray-950 dark:bg-gray-950">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-gray-900 rounded-lg shadow-lg p-6 hover:shadow-yellow-500/20 transform hover:-translate-y-1 transition-all duration-300">
          <h2 class="text-lg font-semibold text-yellow-400 mb-2">Total Sales</h2>
          <p class="text-4xl font-bold text-white mb-4">$12,345</p>
          <div class="flex items-center text-green-400">
            <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
            <span class="text-sm">+5.2% last month</span>
          </div>
        </div>

        <!-- Card 2 -->
        <div class="bg-gray-900 rounded-lg shadow-lg p-6 hover:shadow-purple-500/20 transform hover:-translate-y-1 transition-all duration-300">
          <h2 class="text-lg font-semibold text-purple-400 mb-2">New Orders</h2>
          <p class="text-4xl font-bold text-white mb-4">1,234</p>
          <div class="flex items-center text-red-400">
            <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
            </svg>
            <span class="text-sm">-1.5% last month</span>
          </div>
        </div>

        <!-- Card 3 -->
        <div class="bg-gray-900 rounded-lg shadow-lg p-6 hover:shadow-blue-500/20 transform hover:-translate-y-1 transition-all duration-300">
          <h2 class="text-lg font-semibold text-blue-400 mb-2">Active Listings</h2>
          <p class="text-4xl font-bold text-white mb-4">567</p>
          <div class="flex items-center text-green-400">
            <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
            <span class="text-sm">+10 new this week</span>
          </div>
        </div>
      </div>

      <div class="bg-gray-900 rounded-lg shadow-lg p-6 mt-6">
        <h2 class="text-lg font-semibold text-white mb-4">Recent Activities</h2>
        <ul class="divide-y divide-gray-800">
          <li class="flex items-center justify-between py-3">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-green-500" src="https://picsum.photos/id/65/50/50" alt="Product Image">
              <div>
                <p class="text-white font-medium">Order <span class="text-yellow-400">#12345</span> processed</p>
                <p class="text-sm text-gray-400">New Playstation 5 disc version</p>
              </div>
            </div>
            <span class="text-sm text-gray-500">2 hours ago</span>
          </li>
          <li class="flex items-center justify-between py-3">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-blue-500" src="https://picsum.photos/id/237/50/50" alt="Product Image">
              <div>
                <p class="text-white font-medium">New product <span class="text-yellow-400">'Gaming Mouse X'</span> listed</p>
                <p class="text-sm text-gray-400">Added to Electronics category</p>
              </div>
            </div>
            <span class="text-sm text-gray-500">Yesterday</span>
          </li>
          <li class="flex items-center justify-between py-3">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-red-500" src="https://picsum.photos/id/1084/50/50" alt="Product Image">
              <div>
                <p class="text-white font-medium">Payment of <span class="text-yellow-400">$250.00</span> received</p>
                <p class="text-sm text-gray-400">From customer John Doe</p>
              </div>
            </div>
            <span class="text-sm text-gray-500">3 days ago</span>
          </li>
        </ul>
      </div>
    </main>
  </div>
</div>

Playful Educational Sidebar Navigation

A complex, playful, and responsive sidebar navigation component for educational platforms, featuring earth tones, rounded elements, and dark mode support. Includes user profile, main navigation, course progress, and quick links.

Open Preview

                <div class="flex h-screen bg-orange-50 dark:bg-stone-900 font-sans">

  <!-- Sidebar -->
  <aside class="w-64 bg-amber-100 dark:bg-stone-800 p-6 flex flex-col shadow-lg rounded-r-2xl m-3 transition-all duration-300 ease-in-out md:w-64 sm:w-20 lg:w-72 overflow-hidden hover:w-64 md:hover:w-64 sm:hover:w-64">
    <div class="flex items-center justify-between mb-8 transition-all duration-300 ease-in-out">
      <div class="flex items-center space-x-3">
        <img src="https://picsum.photos/id/64/40/40" alt="Logo" class="w-10 h-10 rounded-full shadow-md" />
        <span class="text-stone-700 dark:text-orange-200 text-xl font-bold truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">LearnBuddy</span>
      </div>
    </div>

    <!-- User Profile -->
    <div class="flex items-center space-x-4 p-4 bg-amber-200 dark:bg-stone-700 rounded-xl mb-8 shadow-sm transition-all duration-300 ease-in-out">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-400 dark:border-stone-600 shadow-md" />
      <div class="flex-grow min-w-0 transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">
        <h3 class="text-stone-800 dark:text-orange-100 text-lg font-semibold truncate">Alex Johnson</h3>
        <p class="text-stone-600 dark:text-orange-300 text-sm truncate">Student</p>
      </div>
    </div>

    <!-- Navigation Links -->
    <nav class="flex-grow space-y-3">
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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 12v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-7-7v10a1 1 0 01-1 1h-3"></path>
        </svg>
        <span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Dashboard</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Dashboard</span>
      </a>
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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.414m0-13.414a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zm0 13.414a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">My Courses</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">My Courses</span>
      </a>
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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="M15.5 8a.5.5 0 11-1 0 .5.5 0 011 0zM12 6a.5.5 0 11-1 0 .5.5 0 011 0zM8.5 8a.5.5 0 11-1 0 .5.5 0 011 0zM12 10a.5.5 0 11-1 0 .5.5 0 011 0zM10 12a.5.5 0 11-1 0 .5.5 0 011 0zM10 14a.5.5 0 11-1 0 .5.5 0 011 0zM12 16a.5.5 0 11-1 0 .5.5 0 011 0zM14 14a.5.5 0 11-1 0 .5.5 0 011 0zM14 12a.5.5 0 11-1 0 .5.5 0 011 0zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Schedule</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Schedule</span>
      </a>
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
        </svg>
        <span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Messages</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Messages</span>
        <span class="bg-red-500 text-white text-xs font-semibold px-2 py-0.5 rounded-full absolute top-2 right-2 sm:relative sm:top-auto sm:right-auto sm:ml-auto transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">3</span>
      </a>
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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>
        <span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Resources</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Resources</span>
      </a>
    </nav>

    <!-- Course Progress Section -->
    <div class="mt-8">
      <h4 class="text-stone-800 dark:text-orange-200 text-md font-semibold mb-3 truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Your Progress</h4>
      <div class="bg-amber-200 dark:bg-stone-700 p-4 rounded-xl shadow-sm">
        <div class="flex justify-between items-center mb-2">
          <span class="text-stone-700 dark:text-orange-200 text-sm truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">JavaScript Basics</span>
          <span class="text-stone-600 dark:text-orange-300 text-xs transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">75%</span>
        </div>
        <div class="w-full bg-amber-300 dark:bg-stone-600 rounded-full h-2.5">
          <div class="bg-emerald-500 h-2.5 rounded-full" style="width: 75%"></div>
        </div>
        <button class="mt-4 w-full bg-amber-400 dark:bg-stone-500 text-stone-900 dark:text-white py-2 rounded-lg font-bold text-sm hover:bg-amber-500 dark:hover:bg-stone-400 transition-colors duration-200 shadow-md transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Continue Learning</button>
      </div>
    </div>

    <!-- Quick Links / Settings -->
    <div class="mt-auto pt-8 border-t border-amber-300 dark:border-stone-600">
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Settings</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Settings</span>
      </a>
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Log Out</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Log Out</span>
      </a>
    </div>

  </aside>

  <!-- Main Content Area (Optional - for demonstration) -->
  <main class="flex-1 p-6">
    <h1 class="text-3xl font-bold text-stone-800 dark:text-orange-100 mb-6">Welcome to Dashboard</h1>
    <p class="text-stone-700 dark:text-orange-200">This is where your main content would go.</p>
    <p class="text-stone-700 dark:text-orange-200 mt-4">Resize the window to see responsiveness and hover over the sidebar on small screens to expand it.</p>
    <div class="mt-8 p-6 bg-white dark:bg-stone-800 rounded-lg shadow-md">
      <h2 class="text-xl font-semibold text-stone-800 dark:text-orange-100 mb-4">More Content</h2>
      <p class="text-stone-700 dark:text-orange-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <img src="https://picsum.photos/id/1015/600/300" alt="Placeholder Image" class="mt-6 rounded-lg shadow-sm border border-stone-200 dark:border-stone-700">
    </div>
  </main>
</div>

Sidebar Navigation Component

A complex, responsive sidebar navigation component with a triadic color scheme and gradient transitions, designed for a dashboard interface. Includes dark mode support and multiple interactive elements.

Open Preview

                <div class="flex h-screen bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-500">

  <!-- Sidebar -->
  <div class="fixed inset-y-0 left-0 w-64 bg-white dark:bg-gray-800 shadow-xl transform transition-transform duration-300 md:relative md:translate-x-0 overflow-y-auto z-40"
       x-data="{ open: false }"
       @keydown.escape.window="open = false"
       :class="{'translate-x-0 ease-out': open, '-translate-x-full ease-in': !open}">

    <!-- Sidebar Header -->
    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
      <a href="#" class="flex items-center space-x-3">
        <svg class="h-8 w-8 text-yellow-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 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-2xl font-bold tracking-wider">Dashboard</span>
      </a>
      <button class="md:hidden focus:outline-none" @click="open = false">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Sidebar Navigation Links -->
    <nav class="mt-6">
      <ul>
        <li class="relative px-6 py-3">
          <span class="absolute inset-y-0 left-0 w-1 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out text-blue-600 dark:text-blue-400" href="#">
            <svg class="h-5 w-5 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 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-4h4" />
            </svg>
            <span>Overview</span>
          </a>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 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>Analytics</span>
          </a>
        </li>

        <li class="relative px-6 py-3" x-data="{ open: false }">
          <button @click="open = !open" class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400">
            <span class="inline-flex items-center">
              <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1.414M14 9l2 2m0 0l2-2m-2-2v4m-6 3H6m6 0h.01M6 15h2m-2 2h2m0 0h.01M10 20v-6a2 2 0 012-2h.01M12 9l2-2m0 0l2 2m-2-2v4m-3 10V6a2 2 0 012-2h2a2 2 0 012 2v14M8 5a2 2 0 012-2h2a2 2 0 012 2v14" />
              </svg>
              <span>Reports</span>
            </span>
            <svg class="h-4 w-4 transform transition-transform duration-200" :class="{'rotate-90': open}" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
          <ul x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner">
            <li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
              <a class="w-full" href="#">Daily Reports</a>
            </li>
            <li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
              <a class="w-full" href="#">Weekly Reports</a>
            </li>
            <li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
              <a class="w-full" href="#">Monthly Reports</a>
            </li>
          </ul>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354l.707-.707A4 4 0 0117 4.5v16.146a.5.5 0 01-.854.354L12 18.5l-4.146 2.5A.5.5 0 017 20.646V4.5a4 4 0 013.293-3.854L12 4.354z" />
            </svg>
            <span>Projects</span>
          </a>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h2V7a4 4 0 00-4-4H7a4 4 0 00-4 4v10a2 2 0 002 2h4m3 0l-3 3v-3m0 0h8m-10 6L9 14l5-5 5 5" />
            </svg>
            <span>Tasks</span>
          </a>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" 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.746 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" />
            </svg>
            <span>Users</span>
          </a>
        </li>
      </ul>
    </nav>

    <!-- Sidebar Footer (User Info) -->
    <div class="absolute bottom-0 left-0 w-full p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full object-cover ring-2 ring-blue-500 dark:ring-yellow-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="text-sm font-semibold">John Doe</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
          </div>
        </div>
        <button class="p-2 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md transition-colors duration-200 hover:text-red-600 dark:hover:text-red-400">
          <svg class="h-5 w-5" 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>
        </button>
      </div>
    </div>

  </div>

  <!-- Overlay for mobile when sidebar is open -->
  <div class="fixed inset-0 bg-black opacity-50 z-30 md:hidden" x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-50" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-50" x-transition:leave-end="opacity-0" @click="open = false"></div>

  <!-- Main Content Area -->
  <div class="flex-1 flex flex-col overflow-hidden">

    <!-- Top Bar / Navbar -->
    <header class="flex justify-between items-center px-6 py-4 bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 z-20">
      <div class="flex items-center">
        <button class="md:hidden text-gray-500 focus:outline-none focus:text-gray-900 dark:focus:text-gray-100 dark:text-gray-400" @click="open = true">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
        <h1 class="ml-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">Overview</h1>
      </div>

      <div class="flex items-center space-x-4">
        <!-- Search Bar -->
        <div class="relative hidden md:block">
          <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
              <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <input class="block w-full rounded-md border-gray-300 pl-10 pr-4 py-2 text-gray-900 placeholder-gray-500 ring-1 ring-gray-300 dark:ring-gray-600 focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-gray-100 dark:bg-gray-700 dark:text-gray-100" placeholder="Search..." type="search">
        </div>

        <!-- Settings Dropdown -->
        <div class="relative" x-data="{ open: false }">
          <button @click="open = !open" class="flex items-center text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:text-gray-900 transition-colors duration-200">
            <svg class="h-6 w-6" 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.37a1.724 1.724 0 002.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>
          </button>
          <div x-show="open" @click.away="open = false" x-transition class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-md shadow-lg py-1 z-50">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Logout</a>
          </div>
        </div>

        <!-- Dark Mode Toggle -->
        <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
          <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
          <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.288a1 1 0 00.757 1.637l.95-.316A1 1 0 0018 15v-1a1 1 0 00-.757-.966l-.95-.316a1 1 0 00-.671 1.344zM16 10.5a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zm-4.288 4.459a1 1 0 00-1.637.757l-.316.95A1 1 0 0010 18h1a1 1 0 00.966-.757l.316-.95a1 1 0 00-1.344-.671zM10.5 16a.5.5 0 01-.5.5v1a.5.5 0 011 0v-1a.5.5 0 01-.5-.5zM5.712 14.459a1 1 0 00-.757-1.637l-.95.316A1 1 0 002 15v1a1 1 0 00.757.966l.95.316a1 1 0 00.671-1.344zM4 10.5a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM5.712 5.541a1 1 0 00.757-1.637l.95.316A1 1 0 008 3V2a1 1 0 00-.757-.966l-.95-.316A1 1 0 005.712 5.541zM10.5 4a.5.5 0 01-.5.5v1a.5.5 0 011 0V4a.5.5 0 01-.5-.5zm4.288 5.541a1 1 0 00-1.637-.757l-.316-.95A1 1 0 0010 2h-1a1 1 0 00-.966.757l-.316.95a1 1 0 001.344.671z"></path></svg>
        </button>

      </div>
    </header>

    <!-- Main Content Body (Placeholder) -->
    <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 dark:bg-gray-900 p-6">
      <div class="container mx-auto">
        <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Welcome to your Dashboard!</h2>
        <p class="text-gray-700 dark:text-gray-300">This is a placeholder for your dashboard content. You can add charts, data tables, and other widgets here.</p>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
          <!-- Card 1 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Total Sales</h3>
              <div class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Monthly</div>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">$12,345</p>
            <p class="text-sm text-green-600 dark:text-green-400"><svg class="inline-block w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg> 5.2% since last month</p>
          </div>

          <!-- Card 2 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">New Users</h3>
              <div class="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Weekly</div>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">875</p>
            <p class="text-sm text-red-600 dark:text-red-400"><svg class="inline-block w-4 h-4 mr-1 transform rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg> 1.8% since last week</p>
          </div>

          <!-- Card 3 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Orders Pending</h3>
              <div class="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Today</div>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">23</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Needs attention</p>
          </div>
        </div>

        <div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Recent Activity</h3>
          <ul class="divide-y divide-gray-200 dark:divide-gray-700">
            <li class="py-3 flex items-center justify-between">
              <p class="text-gray-800 dark:text-gray-200"><span class="font-medium">Sarah G.</span> added a new project "Website Redesign".</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
            </li>
            <li class="py-3 flex items-center justify-between">
              <p class="text-gray-800 dark:text-gray-200"><span class="font-medium">You</span> updated task "Fix Login Bug".</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
            </li>
            <li class="py-3 flex items-center justify-between">
              <p class="text-gray-800 dark:text-gray-200"><span class="font-medium">System</span> generated new sales report.</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">3 days ago</span>
            </li>
          </ul>
        </div>

      </div>
    </main>
  </div>
</div>

<!-- Alpine.js for dropdowns and sidebar toggle -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

<!-- Dark Mode Script -->
<script>
  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

  // Change the icons inside the button based on previous settings
  if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    themeToggleLightIcon.classList.remove('hidden');
  } else {
    themeToggleDarkIcon.classList.remove('hidden');
  }

  const themeToggleBtn = document.getElementById('theme-toggle');

  themeToggleBtn.addEventListener('click', function() {

    // toggle icons inside button
    themeToggleDarkIcon.classList.toggle('hidden');
    themeToggleLightIcon.classList.toggle('hidden');

    // if set via local storage previously
    if (localStorage.getItem('color-theme')) {
      if (localStorage.getItem('color-theme') === 'light') {
        document.documentElement.classList.add('dark');
        localStorage.setItem('color-theme', 'dark');
      } else {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('color-theme', 'light');
      }

      // if NOT set via local storage previously
    } else {
      if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('color-theme', 'light');
      } else {
        document.documentElement.classList.add('dark');
        localStorage.setItem('color-theme', 'dark');
      }
    }
  });
</script>

Sidebar Navigation Component

A simple, responsive sidebar navigation component with microinteraction-focused hover effects, designed for government/public service websites. Features analogous color scheme and dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
    <!-- Sidebar -->
    <aside class="w-64 bg-teal-600 dark:bg-teal-800 text-white shadow-lg overflow-y-auto transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out md:relative absolute z-40" id="sidebar">
        <div class="p-6 flex items-center justify-between border-b border-teal-500 dark:border-teal-700">
            <a href="#" class="text-2xl font-bold text-white tracking-wide">GovConnect</a>
            <button id="sidebar-close" class="md:hidden focus:outline-none">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <nav class="mt-8">
            <ul>
                <li>
                    <a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
                        <svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" 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 3h3v-3m0 0a1 1 0 001-1V9a1 1 0 00-1-1h-3c-.6 0-1 .4-1 1v3c0 .6.4 1 1 1z"></path>
                        </svg>
                        <span class="group-hover:translate-x-1 transition-transform duration-200">Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
                        <svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
                        </svg>
                        <span class="group-hover:translate-x-1 transition-transform duration-200">Public Services</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
                        <svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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 20v-2c0-.656.126-1.3.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                        <span class="group-hover:translate-x-1 transition-transform duration-200">Citizens</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
                        <svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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="group-hover:translate-x-1 transition-transform duration-200">Departments</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
                        <svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" 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.589.362 1.36.259 1.93-1.066zm-2.476 8.36L9.73 12m0 0l-3.33-2.35M9.73 12l-2.35 3.33M12 2v4m0 16v-4m-10-8H4m16 0h-2"></path>
                        </svg>
                        <span class="group-hover:translate-x-1 transition-transform duration-200">Settings</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="absolute bottom-0 left-0 w-full p-6 border-t border-teal-500 dark:border-teal-700 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-teal-400 dark:border-teal-600">
            <div>
                <p class="text-sm font-semibold text-white">John Doe</p>
                <p class="text-xs text-teal-200 dark:text-teal-300">Administrator</p>
            </div>
        </div>
    </aside>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col">
        <header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 shadow-md md:shadow-none relative z-30">
            <button id="sidebar-open" class="md:hidden focus:outline-none text-gray-700 dark:text-gray-300">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>

            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Dashboard Overview</h1>

            <!-- Dark Mode Toggle -->
            <button id="dark-mode-toggle" class="focus:outline-none p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
                <svg class="h-6 w-6 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path id="light-icon" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m8.003-4.32a6 6 0 11-1.042 12.639C10.156 20.354 11.229 21 12 21c3.866 0 7-3.134 7-7s-3.134-7-7-7z"></path>
                    <path id="dark-icon" 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>
        </header>

        <main class="flex-1 p-6 md:p-8 overflow-y-auto">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Card 1 -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6 flex flex-col items-start">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Latest Announcement</h3>
                    <p class="text-gray-600 dark:text-gray-400 text-sm">New guidelines for public assistance available from October 1st.</p>
                    <a href="#" class="mt-4 text-teal-600 dark:text-teal-400 hover:underline flex items-center group">
                        Read More
                        <svg class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg>
                    </a>
                    <img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image" class="mt-4 rounded-md w-full object-cover max-h-32">
                </div>
                <!-- Card 2 -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6 flex flex-col items-start">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Open Data Portal</h3>
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Explore datasets related to local economy and demographics.</p>
                    <a href="#" class="mt-4 text-teal-600 dark:text-teal-400 hover:underline flex items-center group">
                        Access Data
                        <svg class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg>
                    </a>
                    <img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image" class="mt-4 rounded-md w-full object-cover max-h-32">
                </div>
                <!-- Card 3 -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6 flex flex-col items-start">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Contact Support</h3>
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Our support team is available 24/7 for your queries.</p>
                    <a href="#" class="mt-4 text-teal-600 dark:text-teal-400 hover:underline flex items-center group">
                        Get Help
                        <svg class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg>
                    </a>
                    <img src="https://picsum.photos/300/200?random=3" alt="Placeholder Image" class="mt-4 rounded-md w-full object-cover max-h-32">
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    const sidebar = document.getElementById('sidebar');
    const sidebarOpenBtn = document.getElementById('sidebar-open');
    const sidebarCloseBtn = document.getElementById('sidebar-close');
    const darkModeToggle = document.getElementById('dark-mode-toggle');
    const lightIcon = document.getElementById('light-icon');
    const darkIcon = document.getElementById('dark-icon');

    // Sidebar Toggle
    sidebarOpenBtn.addEventListener('click', () => {
        sidebar.classList.remove('-translate-x-full');
    });

    sidebarCloseBtn.addEventListener('click', () => {
        sidebar.classList.add('-translate-x-full');
    });

    // Close sidebar if window resized to md or larger while open
    window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) { // md breakpoint
            sidebar.classList.remove('-translate-x-full');
        }
    });

    // Dark Mode Toggle
    function toggleDarkMode() {
        if (document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('theme', 'light');
            lightIcon.classList.add('hidden');
            darkIcon.classList.remove('hidden');
        } else {
            document.documentElement.classList.add('dark');
            localStorage.setItem('theme', 'dark');
            lightIcon.classList.remove('hidden');
            darkIcon.classList.add('hidden');
        }
    }

    darkModeToggle.addEventListener('click', toggleDarkMode);

    // Initial theme setting based on localStorage or system preference
    const currentTheme = localStorage.getItem('theme');
    if (currentTheme === 'dark' || (!currentTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
        lightIcon.classList.remove('hidden');
        darkIcon.classList.add('hidden');
    } else {
        lightIcon.classList.add('hidden');
        darkIcon.classList.remove('hidden');
    }
</script>

Sidebar Navigation Component - Gaming

A minimalist, responsive sidebar navigation component with black, white, and a bright accent color, designed for gaming websites. Includes dark mode support.

Open Preview

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

  <!-- Mobile Menu Toggle Button (hidden on desktop) -->
  <button class="p-4 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 md:hidden absolute top-0 left-0 z-20" aria-label="Toggle Navigation">
    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
    </svg>
  </button>

  <!-- Sidebar -->
  <aside class="w-64 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-transform duration-200 ease-in-out z-10" id="sidebar">
    <div class="flex flex-col h-full">
      <!-- Logo/Title -->
      <div class="p-6 border-b border-gray-200 dark:border-gray-700">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">GameForge</h1>
      </div>

      <!-- Navigation Links -->
      <nav class="flex-1 p-4 space-y-2">
        <a href="#dashboard" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" 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-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          <span class="font-medium">Dashboard</span>
        </a>
        <a href="#games" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" 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.792 2-4 2s-4-.895-4-2 1.792-2 4-2 4 .895 4 2zm12-2v2m-6-2v2M6 16.5V11M9 13V6l2-1m-2 7a2 2 0 11-4 0 2 2 0 014 0zm10.75-2.25l-2-2-4 4-2 2z" />
          </svg>
          <span class="font-medium">My Games</span>
        </a>
        <a href="#community" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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.857M17 20v-2c0-.35L3 4m7 2a4 4 0 11-8 0 4 4 0 018 0zm0 0c1.734-.843 2.002-2.906 1.157-4.64C10.16 2.766 8.1 2.498 6.357 3.353m6.762 6.762A4 4 0 1120 16a4 4 0 01-8 0zv" />
          </svg>
          <span class="font-medium">Community</span>
        </a>
        <a href="#store" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          <span class="font-medium">Store</span>
        </a>
        <a href="#settings" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" 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.37a1.724 1.724 0 002.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 class="font-medium">Settings</span>
        </a>
      </nav>

      <!-- User Profile/Accent Section -->
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 mt-auto">
        <div class="flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full ring-2 ring-blue-500 dark:ring-blue-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div class="leading-none">
            <p class="text-sm font-semibold text-gray-900 dark:text-white">PlayerOne</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Level 42</p>
          </div>
        </div>
      </div>
    </div>
  </aside>

  <!-- Main Content Area (for demonstration, can be styled further) -->
  <main class="flex-1 p-8 overflow-y-auto">
    <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Welcome, PlayerOne!</h2>
    <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">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Latest Achievement</h3>
        <p class="text-gray-600 dark:text-gray-300">Unlocked 'Master Adventurer' in 'The Eldoria Chronicles'!</p>
        <img class="mt-4 rounded-md object-cover w-full h-32" src="https://picsum.photos/300/200?random=1" alt="Achievement thumbnail">
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">New Game Releases</h3>
        <p class="text-gray-600 dark:text-gray-300">Check out the highly anticipated 'Galactic Conquest' this week!</p>
        <img class="mt-4 rounded-md object-cover w-full h-32" src="https://picsum.photos/300/200?random=2" alt="New game thumbnail">
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Community Highlights</h3>
        <p class="text-gray-600 dark:text-gray-300">Top 5 'Fortress Siege' strategies discussed in forums.</p>
        <img class="mt-4 rounded-md object-cover w-full h-32" src="https://picsum.photos/300/200?random=3" alt="Community thumbnail">
      </div>
    </div>
  </main>

  <!-- Optional: Overlay for mobile menu -->
  <div class="fixed inset-0 bg-black bg-opacity-50 z-5 hidden md:hidden" id="sidebar-overlay"></div>

</div>

<!-- Simple JavaScript for mobile menu toggle - Note: This is an exception for demonstration purposes as per prompt, but component is designed to render without JS. -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const toggleButton = document.querySelector('button[aria-label="Toggle Navigation"]');
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebar-overlay');

    if (toggleButton && sidebar && overlay) {
      toggleButton.addEventListener('click', () => {
        sidebar.classList.toggle('-translate-x-full');
        overlay.classList.toggle('hidden');
      });

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

Search Components

Categories

Sidebar Navigation