Hamburger Menu 컴포넌트
Tailwind CSS를 사용하여 브루탈리즘 스타일로 디자인된 반응형 햄버거 메뉴 구성 요소로, 다크 모드 지원과 이미지 및 아바타에 대한 플레이스홀더가 특징입니다.
HTML 코드
<div class="flex items-center justify-between p-5 bg-gray-800 text-white">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-3">
<span class="text-2xl font-bold">Brutalism Menu</span>
</div>
<div class="lg:hidden">
<button id="menu-toggle" class="flex items-center justify-center h-10 w-10 rounded-md bg-gray-600 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-200">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" /></svg>
</button>
</div>
<div class="hidden lg:flex space-x-4">
<a href="#" class="font-semibold hover:text-gray-400">Home</a>
<a href="#" class="font-semibold hover:text-gray-400">About</a>
<a href="#" class="font-semibold hover:text-gray-400">Services</a>
<a href="#" class="font-semibold hover:text-gray-400">Contact</a>
</div>
</div>
<div id="menu" class="lg:hidden bg-gray-900 text-white fixed top-0 left-0 w-full h-full z-50 hidden">
<div class="flex flex-col items-center justify-center h-full space-y-4">
<a href="#" class="text-lg font-bold hover:text-gray-400">Home</a>
<a href="#" class="text-lg font-bold hover:text-gray-400">About</a>
<a href="#" class="text-lg font-bold hover:text-gray-400">Services</a>
<a href="#" class="text-lg font-bold hover:text-gray-400">Contact</a>
<button class="mt-6 h-10 w-10 bg-red-600 hover:bg-red-500 rounded-full">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 { background-color: #1a1a1a; }
.bg-gray-900 { background-color: #121212; }
}
</style>