RetroRealEstateBarre latérale
Un composant de barre latérale simple et réactif avec une esthétique rétro/vintage, une palette de couleurs neutres et chaudes, conçu pour les plateformes immobilières. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex h-screen bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 font-mono text-stone-800 dark:text-stone-200 overflow-hidden">
<!-- Sidebar for larger screens -->
<aside class="w-64 flex-shrink-0 bg-stone-50 dark:bg-stone-800 border-r border-stone-200 dark:border-stone-700 p-6 hidden md:flex flex-col shadow-lg">
<div class="mb-8 text-center">
<h1 class="text-3xl font-bold tracking-wider text-stone-900 dark:text-stone-50 drop-shadow-sm">Neon Estate</h1>
<p class="text-sm text-stone-500 dark:text-stone-400 mt-1">Your Future Awaits</p>
</div>
<nav class="flex-grow">
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-50 hover:bg-stone-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-md transform hover:scale-105">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
</svg>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm14 9V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h3.586l-1.793 1.793a1 1 0 001.414 1.414L12 18.414l3.793 3.793A1 1 0 0017.207 21l-1.793-1.793V19a2 2 0 002-2v-5zM9 8a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2v-4a2 2 0 00-2-2H9z" clip-rule="evenodd"></path>
</svg>
<span>Properties</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
</svg>
<span>Clients</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.551a1.5 1.5 0 00-1.06.44l-1.9 1.9A1.5 1.5 0 011 17.05v-4.05a3 3 0 013-3h1V4a1 1 0 00-1-1H3a1 1 0 00-1 1v2zm.5 2H3a1 1 0 00-1 1v4a1 1 0 001 1h.5a.5.5 0 01.5.5V16L7.5 13.5a.5.5 0 01.354-.146H17a1 1 0 001-1V5a1 1 0 00-1-1H7a1 1 0 00-1 1v2zm-2 0z" clip-rule="evenodd"></path>
</svg>
<span>Messages</span>
</a>
</li>
</ul>
</nav>
<div class="mt-8 pt-4 border-t border-stone-200 dark:border-stone-700">
<a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
<img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600 shadow-sm" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
<span class="text-sm font-semibold">John Realtor</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 mt-2">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M11.493 15.64a1 1 0 01-.018 1.488S16.29 19 16.29 19a1 1 0 01-.894 1.732h-10a1 1 0 01-.894-1.732s4.815-1.872 4.815-1.872a1 1 0 01-.018-1.488zM4.7 13.5a1 1 0 011.666-.889l8.668 4a1 1 0 01-.158 1.83l-8.668-4a1 1 0 01-.148-1.941zM2 10a1 1 0 01.996.938L3.13 15.06l-.001.002a2 2 0 00-.071 2.072l.092.124.08.106.07.097.06.082L.52 18.665a1 1 0 01-.077-1.393L2.27 15.82a1 1 0 011.4-.298l.006-.002c.005-.002.01-.005.015-.007a1 1 0 01-.065-.006l.005.006zM18 10a1 1 0 00-1-1h-.06l-.004-.002-.016-.007a1 1 0 00-.065.006l.005.006.015.007.004.002h-.06a1 1 0 00-.77 1.638l.007.009.006.007.005.006.004.005.003.004.002.002.001.002a1 1 0 001.488.018s1.872-4.815 1.872-4.815a1 1 0 00-1.732-.894z" clip-rule="evenodd"></path>
</svg>
<span>Settings</span>
</a>
</div>
</aside>
<!-- Mobile/Tablet Top Nav (hidden on desktop) -->
<header class="md:hidden fixed top-0 left-0 w-full bg-stone-50 dark:bg-stone-800 border-b border-stone-200 dark:border-stone-700 p-4 flex justify-between items-center z-10 shadow-lg">
<h1 class="text-2xl font-bold tracking-wider text-stone-900 dark:text-stone-50">Neon Estate</h1>
<button id="mobile-menu-button" class="text-stone-700 dark:text-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 rounded-md p-1">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
</button>
</header>
<!-- Mobile/Tablet Sidebar Overlay (hidden by default) -->
<div id="mobile-sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden md:hidden"></div>
<aside id="mobile-sidebar" class="fixed top-0 left-0 h-full w-64 bg-stone-50 dark:bg-stone-800 border-r border-stone-200 dark:border-stone-700 p-6 transform -translate-x-full transition-transform duration-300 ease-in-out z-30 md:hidden shadow-xl">
<div class="mb-8 text-center">
<h1 class="text-3xl font-bold tracking-wider text-stone-900 dark:text-stone-50 drop-shadow-sm">Neon Estate</h1>
<p class="text-sm text-stone-500 dark:text-stone-400 mt-1">Your Future Awaits</p>
</div>
<nav class="flex-grow">
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-50 hover:bg-stone-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-md transform hover:scale-105">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
</svg>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm14 9V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h3.586l-1.793 1.793a1 1 0 001.414 1.414L12 18.414l3.793 3.793A1 1 0 0017.207 21l-1.793-1.793V19a2 2 0 002-2v-5zM9 8a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2v-4a2 2 0 00-2-2H9z" clip-rule="evenodd"></path>
</svg>
<span>Properties</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
</svg>
<span>Clients</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.551a1.5 1.5 0 00-1.06.44l-1.9 1.9A1.5 1.5 0 011 17.05v-4.05a3 3 0 013-3h1V4a1 1 0 00-1-1H3a1 1 0 00-1 1v2zm.5 2H3a1 1 0 00-1 1v4a1 1 0 001 1h.5a.5.5 0 01.5.5V16L7.5 13.5a.5.5 0 01.354-.146H17a1 1 0 001-1V5a1 1 0 00-1-1H7a1 1 0 00-1 1v2zm-2 0z" clip-rule="evenodd"></path>
</svg>
<span>Messages</span>
</a>
</li>
</ul>
</nav>
<div class="mt-8 pt-4 border-t border-stone-200 dark:border-stone-700">
<a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
<img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600 shadow-sm" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
<span class="text-sm font-semibold">John Realtor</span>
</a>
<a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 mt-2">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M11.493 15.64a1 1 0 01-.018 1.488S16.29 19 16.29 19a1 1 0 01-.894 1.732h-10a1 1 0 01-.894-1.732s4.815-1.872 4.815-1.872a1 1 0 01-.018-1.488zM4.7 13.5a1 1 0 011.666-.889l8.668 4a1 1 0 01-.158 1.83l-8.668-4a1 1 0 01-.148-1.941zM2 10a1 1 0 01.996.938L3.13 15.06l-.001.002a2 2 0 00-.071 2.072l.092.124.08.106.07.097.06.082L.52 18.665a1 1 0 01-.077-1.393L2.27 15.82a1 1 0 011.4-.298l.006-.002c.005-.002.01-.005.015-.007a1 1 0 01-.065-.006l.005.006.015.007.004.002h-.06a1 1 0 00-.77 1.638l.007.009.006.007.005.006.004.005.003.004.002.002.001.002a1 1 0 001.488.018s1.872-4.815 1.872-4.815a1 1 0 00-1.732-.894z" clip-rule="evenodd"></path>
</svg>
<span>Settings</span>
</a>
</div>
</aside>
<!-- Main Content Area (for demonstration, just a placeholder) -->
<main class="flex-1 p-8 pt-20 md:pt-8 overflow-y-auto">
<h2 class="text-4xl font-bold text-stone-900 dark:text-stone-50 mb-6 drop-shadow-lg">Welcome, John!</h2>
<p class="mb-8 text-stone-700 dark:text-stone-300 max-w-2xl">Here's a quick overview of your real estate dashboard. Explore properties, manage clients, and track messages.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
<h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">Total Listings</h3>
<p class="text-4xl font-bold text-stone-600 dark:text-stone-400">1,234</p>
</div>
<div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
<h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">New Inquiries</h3>
<p class="text-4xl font-bold text-teal-600 dark:text-teal-400">42</p>
</div>
<div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
<h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">Pending Sales</h3>
<p class="text-4xl font-bold text-orange-600 dark:text-orange-400">15</p>
</div>
</div>
</main>
<script>
// Basic JavaScript for mobile sidebar toggle
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileSidebar = document.getElementById('mobile-sidebar');
const mobileSidebarOverlay = document.getElementById('mobile-sidebar-overlay');
mobileMenuButton.addEventListener('click', () => {
mobileSidebar.classList.toggle('-translate-x-full');
mobileSidebarOverlay.classList.toggle('hidden');
});
mobileSidebarOverlay.addEventListener('click', () => {
mobileSidebar.classList.add('-translate-x-full');
mobileSidebarOverlay.classList.add('hidden');
});
// Close sidebar if screen resized to desktop
window.addEventListener('resize', () => {
if (window.innerWidth >= 768) { // md breakpoint
mobileSidebar.classList.add('-translate-x-full');
mobileSidebarOverlay.classList.add('hidden');
}
});
});
</script>
</div>Composants associés
Composant de la barre latérale
Un composant de barre latérale réactif conçu avec l’effet Glassmorphism et une palette de couleurs complémentaire, adapté à un blog ou à la consommation de contenu.
Glassmorphism Sidebar avec mode sombre
Un composant de barre latérale réactif avec un design glassmorphism et une prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend un logo, le nom du site, des liens de navigation et une section de profil utilisateur.
Composant de la barre latérale Neumorphism
Un composant de barre latérale réactif avec un design Neumorphism, une palette de couleurs Earth tones et une complexité simple, adapté aux blogs ou à la consommation de contenu. Inclut la prise en charge du mode sombre.