RetroDashboardNavigazione
Un complesso componente di navigazione dashboard a tema retrò con combinazione di colori triadica, progettato per la visualizzazione dei dati e i pannelli di controllo. Presenta un design reattivo, supporto per la modalità oscura e molteplici elementi interattivi ispirati all'estetica degli anni '80/'90.
Codice HTML
<header class="bg-[#FDB515] p-4 text-[#006400] dark:bg-[#00008B] dark:text-[#FDB515] shadow-lg font-mono tracking-widest relative z-50">
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
<div class="flex items-center justify-between w-full md:w-auto mb-4 md:mb-0">
<a href="#" class="text-2xl font-bold uppercase flex items-center group">
<span class="text-4xl leading-none mr-2 transform group-hover:scale-110 transition-transform duration-300">▲</span>
<span class="block relative group-hover:text-[#FFB5E8] transition-colors duration-300">
Synth<span class="text-[#006400] dark:text-[#FFB5E8]">Net</span>
<span class="absolute top-0 left-0 w-full h-full text-stroke-thin text-[#FFB5E8] opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="-webkit-text-stroke: 1px currentColor;">SynthNet</span>
</span>
</a>
<button id="mobile-menu-button" class="md:hidden focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
<svg class="w-8 h-8 text-[#006400] dark:text-[#FFB5E8] transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<nav id="main-navigation" class="hidden md:flex flex-col md:flex-row items-center md:space-x-8 lg:space-x-12 w-full md:w-auto transition-all duration-300 ease-in-out md:block">
<a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
Dashboard
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
<span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
</a>
<a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
Analytics
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
<span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
</a>
<a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
Reports
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
<span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
</a>
<div class="relative group py-2 md:py-0 w-full text-center md:w-auto">
<button class="nav-item text-lg flex items-center justify-center w-full md:w-auto relative focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
Settings
<svg class="w-5 h-5 ml-1 transition-transform group-hover:rotate-90 duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
<span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
</button>
<div class="dropdown-menu absolute hidden top-full left-1/2 -translate-x-1/2 mt-2 w-48 bg-[#FDB515] dark:bg-[#00008B] dark:text-[#FFB5E8] border border-[#006400] dark:border-[#FFB5E8] shadow-lg rounded-md overflow-hidden animate-slide-down-fade origin-top-left group-hover:block transition-all duration-300 ease-in-out md:min-w-max">
<a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">User Profile</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">System Prefs</a>
<hr class="border-[#006400] dark:border-[#FFB5E8] opacity-50">
<a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">Logout</a>
</div>
</div>
</nav>
<div class="flex items-center space-x-4 ml-0 md:ml-auto mt-4 md:mt-0 w-full md:w-auto justify-center md:justify-end">
<div class="relative group">
<button class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400]">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
<span class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full text-xs text-white flex items-center justify-center -mt-1 -mr-1 border border-[#FDB515] dark:border-[#00008B] animate-pulse">2</span>
</button>
<span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Notifications</span>
</div>
<div class="relative group">
<img src="https://randomuser.me/api/portraits/men/84.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-[#006400] dark:border-[#FFB5E8] cursor-pointer hover:border-[#FFB5E8] dark:hover:border-[#006400] transition-colors duration-200 shadow-md hover:scale-105 duration-200" />
<span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Profile</span>
</div>
<button id="dark-mode-toggle" class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400] flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path class="sun-icon" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.675l-.707-.707M6.381 6.381l-.707-.707m11.314 11.314l-.707.707m-9.192 0l-.707.707M12 7a5 5 0 100 10 5 5 0 000-10z"></path>
<path class="moon-icon hidden" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
<span class="sr-only">Toggle Dark Mode</span>
</button>
</div>
</div>
</header>
<style>
@keyframes slide-down-fade {
from { opacity: 0; transform: translateY(-10px) translateX(-50%); }
to { opacity: 1; transform: translateY(0) translateX(-50%); }
}
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(10px) translateX(-50%); }
to { opacity: 1; transform: translateY(0) translateX(-50%); }
}
.animate-slide-down-fade {
animation: slide-down-fade 0.3s ease-out forwards;
}
.animate-fade-in-up {
animation: fade-in-up 0.2s ease-out forwards;
}
/* Retro text stroke effect for branding */
.text-stroke-thin {
-webkit-text-stroke: 0.5px currentColor;
text-stroke: 0.5px currentColor;
}
/* Mobile menu responsiveness (JS controlled visibility) */
@media (max-width: 767px) {
.nav-item {
/* Ensures full width clickable area on mobile */
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
margin-bottom: 0.5rem; /* spacing between items */
background-color: rgba(255, 255, 255, 0.1); /* light background for mobile items */
border-radius: 0.25rem;
}
.dark .nav-item {
background-color: rgba(0, 0, 0, 0.1);
}
.nav-item:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.dark .nav-item:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.dropdown-menu {
position: static !important; /* override absolute positioning */
transform: none !important; /* override transform */
width: 100% !important; /* full width */
margin-top: 0 !important;
border: none !important;
box-shadow: none !important;
background-color: transparent !important;
}
.dropdown-menu a {
padding-left: 2.5rem; /* indent dropdown items */
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mainNavigation = document.getElementById('main-navigation');
const darkModeToggle = document.getElementById('dark-mode-toggle');
const sunIcon = darkModeToggle.querySelector('.sun-icon');
const moonIcon = darkModeToggle.querySelector('.moon-icon');
// Mobile menu toggle
mobileMenuButton.addEventListener('click', () => {
mainNavigation.classList.toggle('hidden');
mainNavigation.classList.toggle('flex');
if (mainNavigation.classList.contains('flex')) {
mainNavigation.style.flexDirection = 'column'; // Ensure vertical stacking on mobile
}
});
// Dark mode toggle
const enableDarkMode = () => {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
};
const disableDarkMode = () => {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
};
// Initial theme setup
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
enableDarkMode();
} else {
disableDarkMode();
}
darkModeToggle.addEventListener('click', () => {
if (document.documentElement.classList.contains('dark')) {
disableDarkMode();
} else {
enableDarkMode();
}
});
});
</script>Componenti correlati
Componenti di navigazione
Una barra di navigazione in modalità oscura con design reattivo, con un logo, un avatar e collegamenti per la navigazione.
Componenti di navigazione
Un componente di navigazione progettato con uno stile brutalista, caratterizzato da una combinazione di colori pastello per le interfacce dei social media, con un layout reattivo e supporto per temi scuri.
Navigazione sui social media
Un componente di navigazione reattivo per i social media con una combinazione di colori tenui/desaturati, ispirato ai principi del Material Design, che supporta le modalità chiara e scura. Presenta layout basati su griglia ed effetti di profondità.