레트로 이커머스 햄버거 메뉴

<header class="fixed top-0 w-full z-50 bg-white dark:bg-[#1A1A1A] shadow-lg">
    <div class="container mx-auto flex justify-between items-center p-4">
        <!-- Logo/Site Title -->
        <div class="text-2xl font-bold text-black dark:text-white">RetroShop</div>

        <!-- Hamburger/Cart/Account icons -->
        <div class="flex items-center space-x-4">
             <!-- Account/Cart Icons placeholders -->
             <a href="#account" class="text-black dark:text-white hover:text-[#A720DA] text-xl focus:outline-none" aria-label="Account"><svg class="w-6 h-6" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg></a>
             <a href="#cart" class="text-black dark:text-white hover:text-[#A720DA] text-xl focus:outline-none" aria-label="Cart"><svg class="w-6 h-6" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></a>
             <!-- Hamburger Label -->
             <label for="menu-toggle" class="block cursor-pointer lg:hidden z-50 w-6 h-6 flex flex-col justify-around focus:outline-none" aria-label="Toggle menu">
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
             </label>
        </div>
    </div>
</header>

<!-- Hidden Checkbox Hack -->
<input type="checkbox" id="menu-toggle" class="hidden">

<!-- Overlay (Sibling to panel) -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden overlay"></div>

<!-- Navigation Panel (Sibling to checkbox) -->
<nav class="fixed top-0 right-0 w-64 md:w-80 lg:w-96 h-full transform translate-x-full transition-transform duration-300 ease-in-out z-50 bg-white dark:bg-[#1A1A1A] border-l-4 border-[#20DACA] dark:border-[#A720DA]" role="navigation" aria-label="Main menu">
    <div class="p-6 overflow-y-auto h-full">
        <!-- Close Button Label -->
        <label for="menu-toggle" class="absolute top-4 right-4 text-3xl font-bold cursor-pointer text-black dark:text-white hover:text-[#FFD700]" aria-label="Close menu">&times;</label>

        <!-- Panel Content -->
        <div class="mt-8">
            <h2 class="text-xl font-bold mb-6 text-black dark:text-white">Menu</h2>

            <!-- Main Navigation -->
            <div class="mb-6 border-b-2 border-[#20DACA] dark:border-[#A720DA] pb-4">
                <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Shop</h3>
                <ul>
                    <li class="mb-2"><a href="#new" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">New Arrivals</a></li>
                    <li class="mb-2"><a href="#sales" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Sales</a></li>
                    <li class="mb-2"><a href="#categories" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Categories</a></li>
                </ul>
            </div>

            <!-- Account/User -->
            <div class="mb-6 pb-4 border-b-2 border-[#20DACA] dark:border-[#A720DA]">
                 <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Account</h3>
                 <div class="flex items-center space-x-3 mb-4">
                     <!-- Avatar -->
                     <img src="https://randomuser.me/api/portraits/men/72.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-[#FFD700]">
                     <span class="text-black dark:text-white">Hello, User!</span>
                 </div>
                 <ul>
                    <li class="mb-2"><a href="#login" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Login / Sign Up</a></li>
                    <li class="mb-2"><a href="#account" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">My Account</a></li>
                 </ul>
            </div>

            <!-- Cart -->
             <div class="mb-6 pb-4 border-b-2 border-[#20DACA] dark:border-[#A720DA]">
                 <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Your Cart</h3>
                 <a href="#cart" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] flex items-center py-1">
                     🛒 Items (3)
                 </a>
             </div>

             <!-- Search (Simple Input) -->
             <div class="mb-6">
                  <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Search</h3>
                  <input type="text" placeholder="Product search..." class="w-full p-2 border-2 border-[#20DACA] dark:border-[#A720DA] bg-white dark:bg-[#1A1A1A] text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFD700] focus:border-transparent">
             </div>

             <!-- Placeholder Image (Optional Retro feel) -->
             <div class="mt-6">
                  <img src="https://picsum.photos/seed/retro-shop-menu/300/200" alt="Retro Shop Image" class="w-full h-auto object-cover border-2 border-[#FFD700]">
             </div>

        </div>
    </div>
</nav>

<!-- Add the CSS for checkbox hack and hamburger animation -->
<style>
    /* Hamburger animation */
    .hamburger-icon {
        display: block;
        width: 1.5rem; /* w-6 */
        height: 0.25rem; /* h-1 */
        margin: 0.25rem 0;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    /* Show overlay when checkbox is checked */
    #menu-toggle:checked ~ .overlay {
        display: block;
    }

    /* Slide panel into view when checkbox is checked */
    #menu-toggle:checked ~ nav {
        transform: translateX(0);
    }

     /* Animate hamburger icon to X */
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(1) {
        transform: translateY(0.5rem) rotate(45deg); /* Adjust based on margin/height */
    }
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(3) {
        transform: translateY(-0.5rem) rotate(-45deg); /* Adjust based on margin/height */
    }

     /* Hide hamburger label on screens larger than lg breakpoint - Adjust if menu should always be hamburger */
    @media (min-width: 1024px) {
       [for="menu-toggle"] {
             display: none;
         }
    }
     /* On large screens, potentially show a different nav style - Not implemented here as only hamburger was requested */

</style>