Catégories

Composants Navigation dans la barre latérale

Navigation dans la barre latérale

Menu de navigation positionné sur le côté de la page

Navigation dans la barre latérale du commerce électronique

Un composant de navigation de barre latérale simple et réactif pour les sites Web de commerce électronique, doté d’un schéma de couleurs triadique, de micro-interactions au survol et de la prise en charge du mode sombre, conçu avec Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex">
  <!-- Sidebar (Hidden on mobile, shown on desktop) -->
  <aside id="sidebar" class="bg-blue-500 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out">
    <a href="#" class="text-white flex items-center space-x-2 px-4">
      <span class="text-2xl font-extrabold">E-Shop</span>
    </a>

    <nav>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Home
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Products
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Categories
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Cart
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Account
      </a>
    </nav>
  </aside>

  <!-- Content area -->
  <div class="flex-1 p-10">
    <!-- A button to toggle the sidebar on mobile -->
    <button id="sidebar-toggle" class="text-blue-700 dark:text-blue-300 focus:outline-none md:hidden">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
    </button>
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-8">Welcome to E-Shop</h1>
    <!-- Your main content goes here -->
    <p class="text-gray-700 dark:text-gray-300">This is the main content area. Add your product listings, categories, etc. here.</p>
  </div>
</div>

<!-- Add this script at the end of the body tag -->
<script>
  const sidebarToggle = document.getElementById('sidebar-toggle');
  const sidebar = document.getElementById('sidebar');

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

Brutalisme Barre latérale Navigation

Un composant de navigation de barre latérale de style brutaliste avec des tons de terre, une complexité modérée, une réactivité et une prise en charge du mode sombre, conçu pour les sites de blogs/contenus utilisant Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex h-screen bg-stone-100 dark:bg-stone-900">
  <!-- Sidebar -->
  <div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out">
    <div class="flex items-center justify-between">
      <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200">Navigation</h2>
      <!-- Mobile toggle (hidden on md and up) -->
      <button class="text-stone-800 dark:text-stone-200 md:hidden">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
    <nav class="text-stone-700 dark:text-stone-300">
      <ul class="space-y-4">
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Home</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Articles</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Categories</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">About</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Contact</a></li>
      </ul>
    </nav>
  </div>
  
  <!-- Content area -->
  <div class="flex-1 p-10 overflow-y-auto">
    <h1 class="text-3xl font-bold text-stone-800 dark:text-stone-200 mb-6">Main Content Area</h1>
    <p class="text-stone-700 dark:text-stone-300">
      This is the main content area. The sidebar is on the left.
    </p>
    <!-- Example content -->
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 1</h3>
        <img src="https://picsum.photos/seed/article1/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
        <p class="text-stone-700 dark:text-stone-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
       <div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 2</h3>
         <img src="https://picsum.photos/seed/article2/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
        <p class="text-stone-700 dark:text-stone-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>

Glassmorphism Navigation latérale

Une navigation complexe et réactive dans la barre latérale Glassmorphism pour un tableau de bord avec un schéma de couleurs complémentaire, la prise en charge du mode sombre et aucun JavaScript.

Ouvrir l’aperçu

                <div class="flex h-screen bg-gray-200 dark:bg-gray-900">
    <!-- Sidebar -->
    <div class="flex flex-col w-64 bg-white dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-xl"
        style="backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.1);"
    >
        <div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700">
            <span class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</span>
        </div>
        <nav class="flex-1 px-2 py-4 space-y-2">
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9m2-13V9a1 1 0 011-1h2a1 1 0 011 1v3m-6 9l2-2m2 2l2-2"></path></svg>
                Home
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                Analytics
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7 5h2m-2 0h-2"></path></svg>
                Reports
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >

                <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                Settings
            </a>
        </nav>
        <div class="flex items-center justify-center h-16 border-t border-gray-300 dark:border-gray-700">
            <img
                class="w-10 h-10 rounded-full"
                src="https://randomuser.me/api/portraits/men/75.jpg"
                alt="Avatar"
            >
            <span class="ml-2 text-sm font-semibold text-gray-800 dark:text-white">John Doe</span>
        </div>
    </div>
    <!-- Content Area (can be added here) -->
</div>

Brutalisme Barre latérale Navigation

Composant de navigation dans la barre latérale réactif avec un design brutal, une palette de couleurs vibrantes et une mise en page simple à des fins de blog/contenu. Inclut la prise en charge du mode sombre.

Ouvrir l’aperçu

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

  <!-- Sidebar -->
  <div class="w-64 px-4 py-6 bg-yellow-400 dark:bg-yellow-700 border-r-4 border-black dark:border-white">
    <h2 class="text-2xl font-bold text-black dark:text-white">Navigation</h2>
    <nav class="mt-8">
      <ul>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Home</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Articles</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">About</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Contact</a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- Content Area (for demonstration) -->
  <div class="flex-1 p-10">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Main Content Area</h1>
    <p class="text-gray-700 dark:text-gray-300">
      This is where the main content of your blog or article would go.
      The sidebar provides navigation on the left.
    </p>
  </div>

</div>

RetroPastelSocialBarre latérale

Un composant de navigation de la barre latérale simple et réactif avec un design rétro/vintage des années 80/90, des couleurs pastel et la prise en charge du mode sombre, conçu pour les interfaces de médias sociaux utilisant Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex h-screen bg-gradient-to-b from-pink-200 to-purple-200 dark:from-gray-800 dark:to-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 p-6 space-y-6 transition-transform transform -translate-x-full md:translate-x-0 md:relative fixed inset-y-0 left-0 z-50">
    <!-- Profile Section -->
    <div class="flex items-center space-x-4">
      <img class="h-12 w-12 rounded-full ring-2 ring-pink-400 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
      <div>
        <h2 class="text-xl font-bold">Jane Doe</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400">@janedoe</p>
      </div>
    </div>

    <nav class="space-y-2">
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9a1 1 0 01-1-1v-5m3-7v3"/></svg>
        <span class="font-medium">Home</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.932 8-11 8a9.913 9.913 0 01-3.365-.686A2 2 0 015 20.5V17m-7-3h2m-2 4h2m4-2h2m-2 4h2"/></svg>
        <span class="font-medium">Messages</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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.436L4 17h5m6 0a6 6 0 00-6 0m6 0v1a3 3 0 01-3 3H9a3 3 0 01-3-3v-1"/></svg>
        <span class="font-medium">Notifications</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
        <span class="font-medium">Profile</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/></svg>
        <span class="font-medium">Settings</span>
      </a>
    </nav>
  </div>

  <!-- Content Area -->
  <div class="flex-1 p-10">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6">Main Content</h1>
    <!-- Your content goes here -->
    <p class="text-gray-700 dark:text-gray-300">This is where the main content of your page will be displayed.</p>
  </div>
</div>

RetroBarre latéraleNavigation

Un composant de navigation dans la barre latérale de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex h-screen">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-800 text-gray-100 retro-sidebar">
    <div class="p-4 text-2xl font-bold border-b border-gray-700 retro-title">Vaporwave Nav</div>
    <nav class="mt-4">
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">💿 Tracks</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">📼 mixtapes</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item"> neon city</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">💾💾💾 save game</a>
    </nav>
  </div>

  <!-- Page Content -->
  <div class="flex-1 p-10 text-2xl font-bold">
    <h1 class="retro-main-title">Welcome to the Grid</h1>
    <p class="mt-4 text-base retro-text">Explore the digital landscape...</p>
      <img src="https://picsum.photos/seed/retroscape/800/600" alt="Retro landscape" class="mt-8 rounded-lg shadow-lg">
  </div>
</div>

<style>
.retro-sidebar {
  background: linear-gradient(145deg, #4a0e4a, #1a051a);
  font-family: 'Press Start 2P', cursive;
}

.retro-title {
  color: #0ff;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff, 0 0 20px #0ff;
}

.retro-nav-item {
  color: #0f0;
  text-shadow: 0 0 3px #0f0;
}

.retro-nav-item:hover {
  color: #ff0;
  text-shadow: 0 0 5px #ff0;
}

.retro-main-title {
    font-family: 'Press Start 2P', cursive;
    color: #f0f;
    text-shadow: 0 0 7px #f0f, 0 0 12px #f0f, 0 0 18px #f0f;
}

.retro-text {
    font-family: 'Press Start 2P', cursive;
    color: #0ff;
    text-shadow: 0 0 3px #0ff;
}

@media (max-width: 768px) {
  .retro-sidebar {
    width: 100%;
    height: auto;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .retro-sidebar {
    background: linear-gradient(145deg, #1a051a, #4a0e4a);
  }
  .retro-title {
    color: #0f0;
    text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0, 0 0 20px #0f0;
  }
  .retro-nav-item {
    color: #0ff;
    text-shadow: 0 0 3px #0ff;
  }
  .retro-nav-item:hover {
    color: #f0f;
    text-shadow: 0 0 5px #f0f;
  }
  .retro-main-title {
      color: #0ff;
      text-shadow: 0 0 7px #0ff, 0 0 12px #0ff, 0 0 18px #0ff;
  }
  .retro-text {
      color: #f0f;
      text-shadow: 0 0 3px #f0f;
  }
}
</style>

Glassmorphism Navigation latérale

Un composant de navigation de barre latérale réactif avec un design Glassmorphism, la prise en charge du mode sombre et l’utilisation de Tailwind CSS. Comporte des éléments translucides givrés ressemblant à du verre avec des effets de flou.

Ouvrir l’aperçu

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

    <!-- Backdrop -->
    <div id="sidebarBackdrop" class="fixed inset-0 z-10 bg-black opacity-0 md:hidden" onclick="closeSidebar()"></div>

    <!-- Sidebar -->
    <div id="sidebar" class="w-64 space-y-6 py-7 px-2 fixed inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition duration-200 ease-in-out z-20
                bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-10 backdrop-filter backdrop-blur-lg dark:text-white text-gray-900">

        <!-- Logo -->
        <a class="text-white flex items-center space-x-2 px-4" href="#">
            <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="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.024 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.024 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.024 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.024 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.024 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.516.315 1.208.1 1.724-.51z"></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="text-2xl font-extrabold">TailwindCSS</span>
        </a>

        <!-- Nav -->
        <nav>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Home</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">About</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Services</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Contact</a>
        </nav>
    </div>

    <!-- Content -->
    <div class="flex-1 p-10 text-2xl font-bold">
        <button onclick="openSidebar()" class="md:hidden text-gray-500 dark:text-gray-400 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="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
        Content goes here...
    </div>

</div>

<style>
    /* For Glassmorphism effect in dark mode */
    .dark .backdrop-blur-lg {
        backdrop-filter: blur(16px);
    }

    /* For Glassmorphism effect in light mode */
    .backdrop-blur-lg {
        backdrop-filter: blur(16px);
    }
</style>

<script>
    function openSidebar() {
        document.getElementById('sidebar').classList.remove('-translate-x-full');
        document.getElementById('sidebarBackdrop').classList.remove('opacity-0');
        document.getElementById('sidebarBackdrop').classList.add('opacity-50');
    }

    function closeSidebar() {
        document.getElementById('sidebar').classList.add('-translate-x-full');
        document.getElementById('sidebarBackdrop').classList.remove('opacity-50');
        document.getElementById('sidebarBackdrop').classList.add('opacity-0');
    }
</script>
```

Composant de navigation dans la barre latérale

Un composant de navigation de barre latérale réactif stylisé de manière skeuomorphique avec prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex">
  <aside class="bg-gray-900 text-white w-64 h-screen shadow-lg rounded-r-3xl p-5">
    <div class="flex flex-col items-center mb-10">
      <img class="rounded-full border-4 border-gray-700" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" width="100" height="100" />
      <h2 class="mt-3 text-xl font-bold">John Doe</h2>
      <p class="text-gray-400">Web Developer</p>
    </div>
    <nav>
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=1" alt="Icon" />
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=2" alt="Icon" />
            Profile
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=3" alt="Icon" />
            Settings
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=4" alt="Icon" />
            Help
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=5" alt="Icon" />
            Logout
          </a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="flex-1 p-10 bg-gray-200">
    <h1 class="text-3xl font-bold">Main Content Area</h1>
    <p>This is where your main content goes.</p>
  </main>
</div>