RetroRealEstate사이드바
레트로/빈티지 미학, 따뜻한 중성 색상 구성표를 갖춘 간단하고 반응이 빠른 사이드바 구성 요소로, 부동산 플랫폼을 위해 설계되었습니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<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>관련 구성 요소
3D_Earth_Tones_Non_Profit_Sidebar
3D 디자인 요소와 흙색 색 구성표가 있는 복잡하고 반응이 빠른 사이드바 구성 요소로, 비영리 및 자선 웹 사이트에 적합합니다. 다크 모드 지원 및 시맨틱 HTML이 포함됩니다.
Cryptocurrency Sidebar 구성 요소
암호화폐 및 블록체인 애플리케이션용으로 설계된 복잡하고 반응형이 빠른 사이드바 구성 요소로, 음소거된 색 구성표와 완전한 다크 모드를 지원하는 머티리얼 디자인 원칙을 특징으로 합니다.