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 simple y receptivo con un estilo de diseño industrial, un esquema de color neutro cálido y soporte para modo oscuro, adecuado para aplicaciones de criptomonedas / blockchain.
Glassmorphism Sidebar Navigation
Una barra de navegación lateral de Glassmorphism compleja y receptiva para un tablero con un esquema de color complementario, compatibilidad con modo oscuro y sin JavaScript.
Componente de navegación de la barra lateral
Un componente de navegación de barra lateral simple y receptivo diseñado para tableros, con animaciones atractivas y una combinación de colores terrosos. Es compatible con el modo oscuro.