食品/レストランのハンバーガーメニューコンポーネント(メンフィスパステル)

<nav class="bg-pink-100 dark:bg-sky-950 p-4 shadow-md font-sans">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-orange-500 dark:text-orange-300 text-3xl font-bold tracking-tight transform -rotate-3 hover:scale-105 transition-transform duration-300 ease-in-out">
      <span class="block">YUM!</span>
      <span class="text-blue-400 dark:text-blue-200 text-sm block font-normal mt-0.5">Menu</span>
    </a>

    <!-- Desktop Menu -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 items-center">
      <a href="#home" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Home
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#menu" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Our Menu
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#offers" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Special Offers
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#contact" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <button class="px-6 py-2 rounded-full bg-orange-400 dark:bg-orange-600 text-white dark:text-gray-100 text-lg font-bold shadow-lg transform -skew-x-6 hover:skew-x-0 hover:scale-105 transition-all duration-300 ease-in-out">
        Order Now!
      </button>
    </div>

    <!-- Mobile Hamburger Button (visible on small screens) -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-purple-600 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8 transform rotate-6 hover:rotate-0 transition-transform duration-300 ease-in-out" 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"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, shown with JS) -->
  <div id="mobile-menu" class="md:hidden hidden bg-pink-50 dark:bg-sky-900 border-t border-purple-200 dark:border-sky-800 mt-4 py-4 rounded-b-lg shadow-inner">
    <div class="flex flex-col items-center space-y-4">
      <a href="#home" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Home
      </a>
      <a href="#menu" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Our Menu
      </a>
      <a href="#offers" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Special Offers
      </a>
      <a href="#contact" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Contact
      </a>
      <button class="mt-4 px-8 py-3 rounded-full bg-orange-400 dark:bg-orange-600 text-white dark:text-gray-100 text-xl font-bold shadow-lg transform -skew-x-6 hover:skew-x-0 hover:scale-105 transition-all duration-300 ease-in-out w-4/5">
        Order Now!
      </button>
    </div>
  </div>
</nav>

<!-- JavaScript to toggle the mobile menu -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    button.addEventListener('click', function() {
      menu.classList.toggle('hidden');
    });
  });
<\/script>