Sidebar Navigation 구성 요소
반응형 사이드바 탐색 구성 요소는 Tailwind CSS를 사용하여 어두운 테마를 지원하는 스큐어모픽 방식으로 스타일링되었습니다.
HTML 코드
<div class="flex">
<aside class="bg-gray-900 text-white w-64 h-screen shadow-lg rounded-r-3xl p-5">
<div class="flex flex-col items-center mb-10">
<img class="rounded-full border-4 border-gray-700" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" width="100" height="100" />
<h2 class="mt-3 text-xl font-bold">John Doe</h2>
<p class="text-gray-400">Web Developer</p>
</div>
<nav>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
<img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=1" alt="Icon" />
Dashboard
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
<img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=2" alt="Icon" />
Profile
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
<img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=3" alt="Icon" />
Settings
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
<img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=4" alt="Icon" />
Help
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
<img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=5" alt="Icon" />
Logout
</a>
</li>
</ul>
</nav>
</aside>
<main class="flex-1 p-10 bg-gray-200">
<h1 class="text-3xl font-bold">Main Content Area</h1>
<p>This is where your main content goes.</p>
</main>
</div>