Componenti Navigazione nella barra laterale Componente di navigazione della barra laterale dei social media

Componente di navigazione della barra laterale dei social media

Componente di navigazione reattivo della barra laterale dei social media con supporto del tema scuro utilizzando i principi di brutalismo, toni della terra e design complesso. Non è necessario JavaScript.

Anteprima

Codice HTML

<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>

Componenti correlati

Componente di navigazione della barra laterale

Un componente di navigazione reattivo della barra laterale con elementi di progettazione 3D, una combinazione di colori analoga e una complessità media con funzionalità interattive. Adatto per blog o siti Web di contenuti.

Aperto

Componente di navigazione della barra laterale - Giochi

Un componente di navigazione della barra laterale minimalista e reattivo con nero, bianco e un colore d'accento brillante, progettato per i siti Web di giochi. Include il supporto per la modalità oscura.

Aperto

Componente di navigazione della barra laterale

Una navigazione della barra laterale semplice e reattiva per le applicazioni dei social media, ottimizzata per la modalità scura con una combinazione di colori analoga. Include una sezione del profilo con un avatar e un nome utente e collegamenti di navigazione. Il design utilizza Tailwind CSS per lo stile e la reattività, con supporto per la modalità oscura tramite il prefisso dark: integrato di Tailwind.

Aperto