Componentes Navegación en la barra lateral Componente de navegación de la barra lateral de redes sociales

Componente de navegación de la barra lateral de redes sociales

Componente de navegación de barra lateral de redes sociales receptivo con soporte de tema oscuro que usa brutalismo, tonos de tierra y principios de diseño complejos. No se necesita JavaScript.

Vista previa

Código 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>

Componentes relacionados

Componente de navegación de la barra lateral - Juegos

Un componente de navegación de barra lateral minimalista y receptivo con negro, blanco y un color de acento brillante, diseñado para sitios web de juegos. Incluye soporte para modo oscuro.

Abrir

Componente de navegación de la barra lateral

Una barra de navegación lateral simple y receptiva para aplicaciones de redes sociales, optimizada para el modo oscuro con un esquema de color análogo. Incluye una sección de perfil con un avatar y un nombre de usuario, y enlaces de navegación. El diseño utiliza Tailwind CSS para el estilo y la capacidad de respuesta, con soporte para el modo oscuro a través del prefijo dark: incorporado de Tailwind.

Abrir

Componente de navegación de la barra lateral de Glassmorphism

Un componente de navegación de la barra lateral para blogs con estilo Glassmorphism, con un esquema de color monocromático. Es un diseño simple y responsivo con soporte para modo oscuro, usando solo HTML y Tailwind CSS. La barra lateral incluye un título del sitio, enlaces de navegación y una sección de perfil.

Abrir