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

Navigazione nella barra laterale di Glassmorphism

Un componente di navigazione reattivo della barra laterale in stile Glassmorphism per i portafogli, con supporto della modalità scura e combinazione di colori analoga. Presenta effetti di vetro smerigliato e più elementi interattivi utilizzando solo HTML e Tailwind CSS.

Aperto

Componente di navigazione della barra laterale

Componente di navigazione reattiva della barra laterale con supporto per la modalità scura. Design minimalista/piatto, combinazione di colori monocromatica, interfaccia complessa per portfolio. Utilizza Tailwind CSS, picsum.photos e randomuser.me. Niente JavaScript.

Aperto

Navigazione nella barra laterale

Componente di navigazione reattivo della barra laterale con combinazione di colori analogici e microinterazioni, incluso il supporto del tema scuro.

Aperto