Componente di navigazione del portfolio
Un componente di navigazione reattivo per un sito web portfolio, ispirato all'estetica della carta/stampa con toni caldi e del tramonto. Include il supporto per la modalità oscura e un layout pulito adatto per mostrare il lavoro.
Codice HTML
<nav class="bg-orange-50 dark:bg-gray-900 border-b border-orange-200 dark:border-gray-800 font-serif shadow-sm">
<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">
<div class="flex-shrink-0">
<a href="#" class="text-orange-700 dark:text-orange-300 text-2xl font-bold tracking-tight">Portfolio<span class="text-orange-500 dark:text-yellow-400">.</span></a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 px-3 py-2 rounded-md text-sm font-medium transition duration-200 ease-in-out">Projects</a>
<a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 px-3 py-2 rounded-md text-sm font-medium transition duration-200 ease-in-out">About</a>
<a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 px-3 py-2 rounded-md text-sm font-medium transition duration-200 ease-in-out">Services</a>
<a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 px-3 py-2 rounded-md text-sm font-medium transition duration-200 ease-in-out">Contact</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button type="button" class="hover:bg-orange-100 dark:hover:bg-gray-800 p-1 rounded-full text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-gray-900 focus:ring-orange-500 dark:focus:ring-yellow-500 transition duration-200 ease-in-out">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</button>
<div class="ml-3 relative">
<div>
<button type="button" class="max-w-xs bg-orange-50 dark:bg-gray-900 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-gray-900 focus:ring-orange-500 dark:focus:ring-yellow-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full border border-orange-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar">
</button>
</div>
<!-- User menu options (hidden by default, can be toggled with JS) -->
<!--
<div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
-->
</div>
<!-- Dark mode toggle -->
<button id="dark-mode-toggle" class="ml-4 hover:bg-orange-100 dark:hover:bg-gray-800 p-1 rounded-full text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-gray-900 focus:ring-orange-500 dark:focus:ring-yellow-500 transition duration-200 ease-in-out">
<span class="sr-only">Toggle dark mode</span>
<svg class="h-6 w-6 hidden dark:block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m8.05-9.636l-.707-.707M16.95 2L16.243 2.707m-9.636 8.05l-.707.707M2.707 16.243l.707.707M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<svg class="h-6 w-6 dark:hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
</svg>
</button>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<!-- Mobile menu button -->
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-orange-600 dark:text-orange-400 hover:text-orange-800 hover:bg-orange-100 dark:hover:text-yellow-400 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500 dark:focus:ring-yellow-500 transition duration-200" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed. -->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Icon when menu is open. -->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out">Projects</a>
<a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out">About</a>
<a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out">Services</a>
<a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out">Contact</a>
</div>
<div class="pt-4 pb-3 border-t border-orange-200 dark:border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full border border-orange-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar">
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-orange-800 dark:text-orange-200">John Doe</div>
<div class="text-sm font-medium leading-none text-orange-600 dark:text-gray-400">[email protected]</div>
</div>
<button type="button" class="ml-auto flex-shrink-0 hover:bg-orange-100 dark:hover:bg-gray-800 p-1 rounded-full text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-gray-900 focus:ring-orange-500 dark:focus:ring-yellow-500 transition duration-200 ease-in-out">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</button>
</div>
<div class="mt-3 px-2 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-orange-200 hover:text-orange-900 hover:bg-orange-100 dark:hover:bg-gray-800 dark:hover:text-yellow-400 transition duration-200 ease-in-out">Your Profile</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-orange-200 hover:text-orange-900 hover:bg-orange-100 dark:hover:bg-gray-800 dark:hover:text-yellow-400 transition duration-200 ease-in-out">Settings</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-orange-200 hover:text-orange-900 hover:bg-orange-100 dark:hover:bg-gray-800 dark:hover:text-yellow-400 transition duration-200 ease-in-out">Sign out</a>
</div>
</div>
</div>
</nav>
<script>
// This script toggle the mobile menu and dark mode.
// In a real application, you would ensure these are correctly integrated with your framework or vanilla JS setup.
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuButton = document.querySelector('nav button[aria-expanded]');
const mobileMenu = document.getElementById('mobile-menu');
const darkModeToggle = document.getElementById('dark-mode-toggle');
// Mobile menu toggle
mobileMenuButton.addEventListener('click', () => {
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
mobileMenu.classList.toggle('hidden');
mobileMenuButton.querySelector('svg:first-child').classList.toggle('hidden');
mobileMenuButton.querySelector('svg:last-child').classList.toggle('hidden');
});
// Dark mode toggle
darkModeToggle.addEventListener('click', () => {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
});
// Check for saved theme preference on load
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
});
</script>Componenti correlati
Componente Componenti di navigazione
Glassmorphism Monocromatico Moderato Componente di Navigazione E-commerce con Supporto Modalità Oscura
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.
Componenti di navigazione
Una barra di navigazione in modalità oscura con design reattivo, con un logo, un avatar e collegamenti per la navigazione.