RetroSidebarNavigation
Un componente de navegación de barra lateral retro/vintage retro/vintage receptivo, sencillo, para sitios web empresariales/corporativos, con soporte para modo oscuro.
Código HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-pink-200 dark:bg-purple-800 shadow-md p-4 flex flex-col justify-between">
<div>
<div class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">ByteCorp</div>
<nav>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg">
Dashboard
</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
Analytics
</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
Reports
</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
Settings
</a>
</nav>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</div>
</div>
</div>
<!-- Content Area (for demonstration purposes) -->
<div class="flex-1 p-8">
<h1 class="text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">Welcome to ByteCorp Dashboard</h1>
<p class="text-gray-700 dark:text-gray-300 text-lg">This is a simple content area. The sidebar is on the left.</p>
</div>
</div>Componentes relacionados
Componente de navegación de la barra lateral
Un componente de navegación de barra lateral receptivo diseñado en el estilo Brutalismo, perfecto para aplicaciones de comercio electrónico. Cuenta con colores vibrantes, alto contraste y múltiples elementos interactivos, incluidos enlaces a diferentes categorías de compras, opciones de cuentas de usuario y un vibrante botón de llamada a la acción para acceder al carrito de compras. El diseño también se adapta al modo oscuro.
Componente de navegación de la barra lateral: escala de grises
Componente de navegación de la barra lateral responsiva
RetroSidebarNavigation
Un componente de navegación de la barra lateral de estilo retro/vintage con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.