Hamburger Menu 컴포넌트
스큐어모픽 햄버거 메뉴 구성 요소는 파스텔 색 구성표와 미니멀한 디자인의 대시보드를 위한 것입니다.
HTML 코드
<div class="flex items-center justify-between p-4 bg-pastel-light dark:bg-pastel-dark rounded-lg shadow-lg">
<div class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
</div>
<button class="flex items-center p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
<div class="hamburger">
<div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
<div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
<div class="w-6 h-1 bg-gray-800 dark:bg-gray-200"></div>
</div>
</button>
</div>
<div class="hidden lg:block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg mt-2">
<ul class="space-y-2">
<li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
<span class="text-gray-800 dark:text-gray-200">User Profile</span>
</li>
<li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
<span class="text-gray-800 dark:text-gray-200">Settings</span>
</li>
<li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
<span class="text-gray-800 dark:text-gray-200">Logout</span>
</li>
</ul>
</div>
<style>
.hamburger {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>