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>

Hamburger Menu 컴포넌트

미리 보기

HTML 코드

관련 구성 요소

Cyberpunk_Hamburger_Menu_Photography

브루탈리즘 햄버거 메뉴

Hamburger Menu 컴포넌트