CCHub Logo CCHub Tailwind Collection
Komponenten Navigation in der Seitenleiste Navigationskomponente für die Social-Media-Seitenleiste

Navigationskomponente für die Social-Media-Seitenleiste

Responsive Social-Media-Sidebar-Navigationskomponente mit Unterstützung für dunkle Themen unter Verwendung von Brutalismus, Erdtönen und komplexen Designprinzipien. Kein JavaScript erforderlich.

Vorschau

HTML-Code 

<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" id="sidebar">
    
    <!-- Profile Section -->
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full border-4 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100">Username</h2>
        <p class="text-sm text-stone-700 dark:text-stone-300">@userhandle</p>
      </div>
    </div>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Navigation -->
    <nav class="space-y-4">
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Feed</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Profile</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Messages</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Notifications</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Settings</a>
    </nav>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Footer Links -->
    <div class="flex flex-wrap gap-2 text-sm text-stone-700 dark:text-stone-300">
      <a href="#" class="hover:underline focus:underline">About</a>
      <a href="#" class="hover:underline focus:underline">Help</a>
      <a href="#" class="hover:underline focus:underline">Terms</a>
      <a href="#" class="hover:underline focus:underline">Privacy</a>
    </div>

  </div>

  <!-- Content Area - Example -->
  <div class="flex-1 p-6">
    <h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">Main Content Area</h1>
    </div>

</div>

Verwandte Komponenten

Brutalismus Seitenleisten-Navigation

Eine Navigationskomponente im brutalistischen Stil der Seitenleiste mit Erdtönen, mäßiger Komplexität, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus, die für Blog-/Content-Websites entwickelt wurde, die Tailwind CSS verwenden.

Offen

Navigation in der E-Commerce-Seitenleiste

Eine einfache, reaktionsschnelle Navigationskomponente für E-Commerce-Websites mit einem triadischen Farbschema, Mikrointeraktionen beim Hover und Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde.

Offen

Navigation in der Seitenleiste von Glassmorphism

Eine reaktionsschnelle Navigationskomponente in der Seitenleiste mit Glassmorphism-Design, Unterstützung für den Dunkelmodus und Verwendung von Tailwind CSS. Verfügt über mattglasähnliche, durchscheinende Elemente mit Unschärfeeffekten.

Offen