레트로 네비게이션 바

<nav class="bg-red-600 dark:bg-gray-900 border-b-8 border-yellow-400 dark:border-yellow-600 font-mono text-white p-4 shadow-xl z-50 relative">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-yellow-300 dark:text-yellow-400 leading-none tracking-tight transform -rotate-2 hover:rotate-0 transition-transform duration-300 ease-in-out">
      <span class="block">BURGER</span>
      <span class="block -mt-3 sm:-mt-4 lg:-mt-6 ml-4 text-white dark:text-gray-200 text-3xl sm:text-4xl lg:text-5xl">BLAST!</span>
    </a>

    <!-- Mobile Menu Button -->
    <div class="md:hidden flex items-center">
      <button id="menu-button" class="text-white focus:outline-none focus:ring-4 focus:ring-yellow-400 dark:focus:ring-yellow-600 p-2 rounded-lg bg-yellow-400 dark:bg-yellow-600 border-2 border-white transform hover:scale-105 transition-transform duration-200 ease-in-out">
        <svg class="w-8 h-8" 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 text-2xl lg:text-3xl font-bold uppercase tracking-wider">
      <a href="#" class="relative group transition-all duration-200 ease-in-out">
        HOME
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="relative group transition-all duration-200 ease-in-out">
        MENU
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="relative group transition-all duration-200 ease-in-out">
        LOCATIONS
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="relative group transition-all duration-200 ease-in-out flex items-center space-x-2">
        CART
        <svg class="w-7 h-7" 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>
        <span class="bg-yellow-300 dark:bg-yellow-400 text-red-700 dark:text-gray-900 text-sm font-extrabold px-3 py-1 rounded-full absolute -top-2 -right-3 border-2 border-white dark:border-gray-900">3</span>
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>
  </div>

  <!-- Mobile Menu (initially hidden, shown with JS) -->
  <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-red-600 dark:bg-gray-900 border-t-4 border-yellow-400 dark:border-yellow-600 pb-4 shadow-xl z-40">
    <div class="flex flex-col items-center space-y-4 text-2xl font-bold uppercase py-4">
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">HOME</a>
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">MENU</a>
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">LOCATIONS</a>
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out flex items-center justify-center space-x-2">
        <span>CART</span>
        <svg class="w-7 h-7" 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>
        <span class="bg-yellow-300 dark:bg-yellow-400 text-red-700 dark:text-gray-900 text-sm font-extrabold px-3 py-1 rounded-full">3</span>
      </a>
    </div>
  </div>
</nav>

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

    menuButton.addEventListener('click', function () {
      mobileMenu.classList.toggle('hidden');
    });
  });
</script>