3D_Earth_Tones_Non_Profit_Sidebar
Un composant de barre latérale complexe et réactif avec des éléments de conception 3D et une palette de couleurs de terre, adapté aux sites Web à but non lucratif et caritatifs. Inclut la prise en charge du mode sombre et du HTML sémantique.
HTML Code
<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>
Composants associés
Composant de la barre latérale de crypto-monnaie
Un composant de barre latérale complexe et réactif conçu pour les applications de crypto-monnaie et de blockchain, avec des principes de conception matérielle avec une palette de couleurs sourdes et une prise en charge complète du mode sombre.
Composant de la barre latérale
Un composant de barre latérale réactif et minimaliste pour le commerce électronique, avec prise en charge du mode sombre. Il présente une mise en page simple avec des catégories de produits et une icône de panier.
Composant de la barre latérale
Un composant de barre latérale de style Glassmorphism avec une palette de couleurs complémentaire, conçu pour un site web de portfolio avec une complexité modérée. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.