Hamburger Menu 컴포넌트

<div class="relative bg-amber-50 dark:bg-stone-900 overflow-hidden font-sans text-stone-800 dark:text-stone-200">
  <div class="container mx-auto px-4 py-6 md:py-8 relative z-10">
    <div class="flex items-center justify-between">
      <div class="flex-shrink-0">
        <a href="#" class="text-2xl md:text-3xl font-extrabold tracking-tight text-amber-800 dark:text-amber-300 transform -skew-x-6 inline-block py-1 px-3 border-4 border-amber-800 dark:border-amber-300 rotate-2">
          STREAMIFY
        </a>
      </div>
      <div class="hidden md:flex space-x-8 lg:space-x-12 items-center">
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Home</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Movies</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Series</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Explore</a>
        <button class="px-6 py-2 bg-amber-800 text-amber-50 rounded-full font-bold shadow-lg hover:bg-amber-900 border-2 border-transparent transition duration-300 ease-in-out dark:bg-amber-600 dark:text-stone-900 dark:hover:bg-amber-700 dark:hover:text-stone-50 border-amber-800 dark:border-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50">
          Sign In
        </button>
      </div>
      <div class="md:hidden flex items-center">
        <button id="menu-button" class="text-stone-800 dark:text-stone-200 p-2 focus:outline-none transform scale-125">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (Invisible by default, will be toggled by JS) -->
  <div id="mobile-menu" class="absolute top-0 left-0 w-full h-screen bg-stone-100 dark:bg-stone-950 transform -translate-x-full transition-transform duration-500 ease-in-out md:hidden flex flex-col justify-center items-center space-y-8 z-50 overflow-hidden">
    <button id="close-menu-button" class="absolute top-6 right-6 text-stone-800 dark:text-stone-200 p-2 focus:outline-none transform scale-150">
      <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse">Home</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-100">Movies</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-200">Series</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-300">Explore</a>
    <button class="mt-8 px-8 py-3 bg-amber-800 text-amber-50 rounded-full font-bold text-xl shadow-lg hover:bg-amber-900 border-2 border-transparent transition duration-300 ease-in-out dark:bg-amber-600 dark:text-stone-900 dark:hover:bg-amber-700 dark:hover:text-stone-50 border-amber-800 dark:border-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50">
      Join Now
    </button>
  </div>

  <!-- Memphis-style geometric accents -->
  <div class="absolute top-0 -left-1/4 w-3/4 h-full bg-amber-200 dark:bg-stone-700 opacity-60 transform -skew-y-6 rotate-3 z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute bottom-0 -right-1/4 w-1/2 h-2/3 bg-amber-400 dark:bg-stone-600 opacity-60 transform skew-y-3 -rotate-6 z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute top-1/4 right-1/4 w-32 h-32 bg-amber-600 dark:bg-amber-800 opacity-70 transform rotate-45 rounded-full z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute bottom-1/4 left-1/4 w-16 h-16 bg-amber-300 dark:bg-stone-500 opacity-80 transform -rotate-30 border-8 border-dashed border-amber-800 dark:border-stone-400 z-0 pointer-events-none"></div>

</div>

<style>
  /* Custom animation delay for pulse effect */
  .animation-delay-100 {
    animation-delay: 0.1s;
  }
  .animation-delay-200 {
    animation-delay: 0.2s;
  }
  .animation-delay-300 {
    animation-delay: 0.3s;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-button');
    const closeMenuButton = document.getElementById('close-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    menuButton.addEventListener('click', function() {
      mobileMenu.classList.remove('-translate-x-full');
      mobileMenu.classList.add('translate-x-0');
      document.body.style.overflow = 'hidden'; // Prevent body scroll when menu is open
    });

    closeMenuButton.addEventListener('click', function() {
      mobileMenu.classList.remove('translate-x-0');
      mobileMenu.classList.add('-translate-x-full');
      document.body.style.overflow = ''; // Allow body scroll
    });

    // Close menu if a menu item is clicked (optional)
    mobileMenu.querySelectorAll('a').forEach(item => {
      item.addEventListener('click', function() {
        mobileMenu.classList.remove('translate-x-0');
        mobileMenu.classList.add('-translate-x-full');
        document.body.style.overflow = '';
      });
    });

    // Close menu on resize if it's open and transitions to desktop view
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 768) { // Tailwind's 'md' breakpoint
        mobileMenu.classList.remove('translate-x-0');
        mobileMenu.classList.add('-translate-x-full');
        document.body.style.overflow = '';
      }
    });
  });
</script>