3D_Earth_Tones_Non_Profit_Sidebar
Un componente della barra laterale complesso e reattivo con elementi di design 3D e una combinazione di colori dei toni della terra, adatto per siti Web senza scopo di lucro e di beneficenza. Include il supporto per la modalità oscura e l'HTML semantico.
Codice HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans">
<!-- Mobile / Tablet Overlay -->
<div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden lg:hidden"></div>
<!-- Sidebar -->
<aside id="sidebar" class="fixed top-0 left-0 w-64 h-full bg-gradient-to-br from-yellow-700 to-yellow-900 dark:from-gray-800 dark:to-gray-900 text-white transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out z-40 shadow-xl border-r border-yellow-800 dark:border-gray-700 overflow-y-auto overflow-x-hidden flex flex-col pt-6 pb-4">
<!-- Sidebar Header (3D Effect) -->
<div class="p-4 mb-8 relative">
<div class="absolute inset-0 bg-yellow-900 bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg transform rotate-[-2deg] scale-105 shadow-inner"></div>
<div class="relative flex items-center justify-center p-2 bg-yellow-800 dark:bg-gray-800 rounded-lg transform translate-y-0.5 translate-x-0.5 shadow-md border border-yellow-700 dark:border-gray-700">
<img src="https://picsum.photos/40/40?random=1" alt="Non-Profit Logo" class="rounded-full mr-3 shadow-md border-2 border-yellow-600 dark:border-gray-600">
<h1 class="text-2xl font-extrabold tracking-wide text-white drop-shadow-lg">Hope Nexus</h1>
</div>
</div>
<!-- Navigation -->
<nav class="flex-grow space-y-2 px-4">
<a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
relative overflow-hidden cursor-pointer">
<div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
<div class="relative flex items-center w-full">
<svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
</path>
</svg>
<span class="font-semibold">Dashboard</span>
<span class="ml-auto text-xs font-bold px-2 py-0.5 rounded-full bg-yellow-600 dark:bg-gray-700 text-yellow-100 dark:text-gray-300">New</span>
</div>
</a>
<a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
relative overflow-hidden cursor-pointer">
<div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
<div class="relative flex items-center w-full">
<svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" 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="M12 6.253v13.493m0-13.493V6.253a4.5 4.5 0 100 9v0M12 6.253C12 5.094 13.921 5 15 5h1a2 2 0 012 2v2M12 6.253a4.5 4.5 0 010 9v0m0 0C12 18.906 10.079 19 9 19H8a2 2 0 01-2-2v-2m6-10V6.253m0 0a4.5 4.5 0 00-4.5 4.5v0m4.5-4.5a4.5 4.5 0 014.5 4.5v0">
</path>
</svg>
<span class="font-semibold">Campaigns</span>
</div>
</a>
<a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
relative overflow-hidden cursor-pointer">
<div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
<div class="relative flex items-center w-full">
<svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z">
</path>
</svg>
<span class="font-semibold">Donations</span>
<span class="group-hover:animate-ping absolute right-3 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-green-400 opacity-75"></span>
<span class="absolute right-3 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-green-500"></span>
</div>
</a>
<a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
relative overflow-hidden cursor-pointer">
<div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
<div class="relative flex items-center w-full">
<svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" 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="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
</path>
</svg>
<span class="font-semibold">Volunteers</span>
</div>
</a>
<a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
relative overflow-hidden cursor-pointer">
<div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
<div class="relative flex items-center w-full">
<svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
</path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
</path>
</svg>
<span class="font-semibold">Settings</span>
</div>
</a>
</nav>
<!-- User Profile (Bottom) -->
<div class="mt-auto p-4">
<div class="p-3 rounded-xl bg-yellow-800 dark:bg-gray-800 border border-yellow-700 dark:border-gray-700 shadow-lg relative perspective-1000">
<div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-700/20 rounded-xl transform rotate-[2deg] scale-105 shadow-inner"></div>
<div class="relative flex items-center">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-md border-2 border-yellow-600 dark:border-gray-600">
<div>
<p class="font-semibold text-sm text-white">Jane Doe</p>
<p class="text-xs text-yellow-200 dark:text-gray-400">Administrator</p>
</div>
<button class="ml-auto p-2 rounded-full hover:bg-yellow-700 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-gray-500">
<svg class="w-5 h-5 text-yellow-300 dark:text-gray-400" 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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 9h5a2 2 0 002-2V7a2 2 0 00-2-2h-5">
</path>
</svg>
</button>
</div>
</div>
</div>
</aside>
<!-- Main Content (for demonstration, includes toggle button) -->
<main class="flex-1 p-6 lg:ml-64 transition-all duration-300 ease-in-out">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Main Content Area</h2>
<p class="text-gray-700 dark:text-gray-300 mb-6">This is where your main application content would go. The sidebar is fully responsive.</p>
<div class="flex items-center space-x-4 mb-6">
<button id="sidebar-toggle" class="lg:hidden p-3 rounded-lg bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 text-white shadow-md">
<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="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
<button id="dark-mode-toggle" class="lg:hidden p-3 rounded-lg bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 text-white shadow-md">
<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="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>
</button>
<button id="desktop-dark-mode-toggle" class="hidden lg:block p-3 rounded-lg bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 text-white shadow-md">
<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="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>
</button>
</div>
<p class="text-gray-600 dark:text-gray-400">Resize your browser to see responsiveness. Click the menu icon on smaller screens.</p>
</div>
</main>
</div>
<script>
// Dark Mode Toggle Logic
const darkModeToggleDesktop = document.getElementById('desktop-dark-mode-toggle');
const darkModeToggleMobile = document.getElementById('dark-mode-toggle');
function setDarkMode(isDark) {
if (isDark) {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
}
// Check for saved theme or system preference
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
setDarkMode(true);
}
darkModeToggleDesktop.addEventListener('click', () => {
setDarkMode(!document.documentElement.classList.contains('dark'));
});
darkModeToggleMobile.addEventListener('click', () => {
setDarkMode(!document.documentElement.classList.contains('dark'));
});
// Sidebar Toggle Logic
const sidebar = document.getElementById('sidebar');
const sidebarOverlay = document.getElementById('sidebar-overlay');
const sidebarToggle = document.getElementById('sidebar-toggle');
const toggleSidebar = () => {
sidebar.classList.toggle('-translate-x-full');
sidebarOverlay.classList.toggle('hidden');
};
sidebarToggle.addEventListener('click', toggleSidebar);
sidebarOverlay.addEventListener('click', toggleSidebar);
// Close sidebar on larger screens if it was open on mobile
window.addEventListener('resize', () => {
if (window.innerWidth >= 1024) { // Tailwind's 'lg' breakpoint
if (!sidebar.classList.contains('lg:translate-x-0')) {
sidebar.classList.remove('-translate-x-full'); // Ensure it's shown
sidebar.classList.add('lg:translate-x-0');
}
sidebarOverlay.classList.add('hidden'); // Ensure overlay is hidden on desktop
}
});
</script>Componenti correlati
Componente della barra laterale
Un componente reattivo della barra laterale progettato con lo stile Neumorphism utilizzando Tailwind CSS. Presenta un aspetto morbido dell'interfaccia utente con ombre sottili, supporta la modalità oscura e include immagini segnaposto e avatar.
Componente della barra laterale del neumorfismo
Un componente della barra laterale reattivo con design a neumorfismo, combinazione di colori dei toni della terra e complessità semplice, adatto per blog o consumo di contenuti. Include il supporto per la modalità oscura.
Barra laterale Glassmorphism con modalità scura
Un componente della barra laterale reattiva con design glassmorphism e supporto per la modalità oscura utilizzando Tailwind CSS. Include un logo, il nome del sito, i link di navigazione e la sezione del profilo utente.