Hamburger Menu 컴포넌트

어두운 테마를 지원하는 Material Design 스타일로 설계된 반응형 햄버거 메뉴 구성 요소로, 대시보드 탐색에 적합합니다.

미리 보기

HTML 코드

<div class="bg-gray-800 text-white h-screen flex flex-col">
    <div class="flex justify-between items-center p-5">
        <div class="text-2xl font-bold">Dashboard</div>
        <button id="menu-toggle" class="focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" 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>
    <div id="menu" class="hidden bg-gray-700 p-4 rounded-lg shadow-lg">
        <ul class="space-y-2">
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Home</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Profile</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Settings</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Logout</a></li>
        </ul>
    </div>
    <div class="flex-1 p-5">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=1" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 1</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=2" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 2</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=3" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 3</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
        </div>
    </div>
</div>

Hamburger Menu 컴포넌트

미리 보기

HTML 코드

관련 구성 요소

음식/레스토랑용 햄버거 메뉴 구성 요소(Memphis Pastel)

Hamburger Menu 컴포넌트

3D 햄버거 메뉴 컴포넌트