Hamburger Menu 컴포넌트
대시보드용으로 설계된 반응형 햄버거 메뉴 구성 요소로, 밝은 테마와 어두운 테마 모두에 적합한 그레이스케일 색상 구성표의 3D 디자인 스타일입니다.
HTML 코드
<div class="bg-gray-200 dark:bg-gray-800 transition duration-300 ease-in-out p-4 rounded-lg shadow-lg transform hover:scale-105">
<div class="flex justify-between items-center">
<div class="text-lg font-bold text-gray-800 dark:text-white">Dashboard</div>
<button class="text-gray-800 dark:text-white focus:outline-none hover:text-gray-600 dark:hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<nav class="mt-4">
<ul class="space-y-2">
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Home</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Profile</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Settings</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Logout</a>
</li>
</ul>
</nav>
</div>
관련 구성 요소
레트로 이커머스 햄버거 메뉴
전자 상거래를 위한 복잡하고 반응이 빠른 다크 모드 지원 햄버거 메뉴 구성 요소로, 레트로/빈티지(80년대/90년대) 미학과 보색(보라색, 청록색, 금색)으로 스타일링되었습니다. 기본 탐색, 계정 링크, 장바구니, 검색 및 확인란 해킹을 사용하는 순수 CSS 토글 기능이 있습니다. Tailwind CSS 클래스를 사용합니다.