Navegación de cartera en modo oscuro
Un componente de navegación complejo y receptivo para un sitio web de cartera, con una interfaz de usuario de modo oscuro con colores análogos, diseñada para mostrar trabajos o productos. Incluye diseños de escritorio, tableta y móvil con menús desplegables y avatar de usuario.
Código HTML
<nav class="bg-gray-800 dark:bg-gray-950 shadow-lg dark:shadow-xl">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<a href="#" class="flex-shrink-0 text-white text-2xl font-bold tracking-wider">
Portfolio
</a>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Home</a>
<div class="relative group">
<button class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300 flex items-center">
Projects
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
</button>
<div class="absolute hidden group-hover:block z-10 mt-2 w-48 rounded-md shadow-lg py-1 bg-gray-800 dark:bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none transition-opacity duration-300 opacity-0 group-hover:opacity-100 transform scale-95 group-hover:scale-100">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Web Development</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">UI/UX Design</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Graphic Design</a>
</div>
</div>
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">About</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Contact</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button type="button" class="relative p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white transition-colors duration-300">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="relative ml-3 group">
<div>
<button type="button" class="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full"
src="https://randomuser.me/api/portraits/men/45.jpg"
alt="User Avatar">
</button>
</div>
<div class="absolute hidden group-hover:block right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-gray-800 dark:bg-gray-900 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transition-opacity duration-300 opacity-0 group-hover:opacity-100 transform scale-95 group-hover:scale-100" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<button class="dark-mode-toggle block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition duration-300" role="menuitem" tabindex="-1" id="user-menu-item-2">
Toggle Dark Mode
</button>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-3">Sign out</a>
</div>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<!-- Mobile menu button -->
<button type="button" class="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" aria-controls="mobile-menu" aria-expanded="false">
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Open main menu</span>
<!-- Menu open: "hidden", Menu closed: "block" -->
<svg class="block h-6 w-6 menu-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Menu open: "block", Menu closed: "hidden" -->
<svg class="hidden h-6 w-6 close-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden hidden mobile-menu" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">Home</a>
<div class="relative group">
<button class="flex items-center w-full text-left text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">
Projects
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
</button>
<div class="pl-6 py-1 mobile-submenu hidden">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Web Development</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">UI/UX Design</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Graphic Design</a>
</div>
</div>
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">About</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">Contact</a>
</div>
<div class="border-t border-gray-700 pb-3 pt-4">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">John Doe</div>
<div class="text-sm font-medium leading-none text-gray-400">[email protected]</div>
</div>
<button type="button" class="ml-auto flex-shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
</div>
<div class="mt-3 space-y-1 px-2">
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Your Profile</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Settings</a>
<button class="dark-mode-toggle block w-full text-left rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 transition duration-300">
Toggle Dark Mode
</button>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Sign out</a>
</div>
</div>
</div>
</nav>
<script>
// Dark mode toggle functionality
const darkModeToggleButtons = document.querySelectorAll('.dark-mode-toggle');
darkModeToggleButtons.forEach(button => {
button.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
// Store user preference in local storage
if (document.documentElement.classList.contains('dark')) {
localStorage.theme = 'dark';
} else {
localStorage.theme = 'light';
}
});
});
// Check for stored theme preference on load
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
// Mobile menu toggle functionality
const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = mobileMenuButton.querySelector('.menu-icon');
const closeIcon = mobileMenuButton.querySelector('.close-icon');
mobileMenuButton.addEventListener('click', () => {
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true' || false;
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
mobileMenu.classList.toggle('hidden');
menuIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
});
// Mobile submenu toggle functionality (simple for demonstration)
const mobileProjectsButton = document.querySelector('#mobile-menu .group button');
const mobileSubmenu = document.querySelector('#mobile-menu .mobile-submenu');
if (mobileProjectsButton) {
mobileProjectsButton.addEventListener('click', () => {
mobileSubmenu.classList.toggle('hidden');
});
}
</script>Componentes relacionados
Componentes de navegación
Un componente de navegación diseñado con un estilo brutalista, con una combinación de colores pastel para las interfaces de redes sociales, con un diseño receptivo y soporte para temas oscuros.
Componentes de navegación
Un componente de navegación minimalista para un sitio web de comercio electrónico, con un logotipo, una barra de búsqueda, enlaces de navegación, un icono de carrito de compras y un avatar de usuario que utiliza Tailwind CSS. Este componente es compatible con el diseño responsivo y el modo oscuro.
Componente de componentes de navegación
Un componente de navegación responsivo con colores vibrantes y microinteracciones, diseñado para una cartera.