Cyberpunk_Hamburger_Menu_Photography

<header class="bg-black text-gray-200 dark:bg-gray-950 p-4 shadow-lg shadow-fuchsia-800/30 relative z-50">
  <nav class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-2xl font-bold text-teal-400 font-mono tracking-wider hover:text-cyan-300 dark:text-teal-500 dark:hover:text-cyan-400 transition duration-300">
      GLITCH_PIXELS
    </a>

    <!-- Desktop Navigation -->
    <div class="hidden md:flex space-x-8">
      <a href="#gallery" class="text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-fuchsia-500 dark:text-purple-400 dark:hover:text-purple-300 dark:hover:border-purple-400">
        Gallery
      </a>
      <a href="#portfolio" class="text-teal-400 hover:text-teal-300 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-teal-400 dark:text-teal-500 dark:hover:text-teal-400 dark:hover:border-teal-500">
        Portfolio
      </a>
      <a href="#about" class="text-orange-400 hover:text-orange-300 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-orange-400 dark:text-yellow-400 dark:hover:text-yellow-300 dark:hover:border-yellow-400">
        About
      </a>
      <a href="#contact" class="text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-fuchsia-500 dark:text-purple-400 dark:hover:text-purple-300 dark:hover:border-purple-400">
        Contact
      </a>
    </div>

    <!-- Mobile Hamburger Button -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-fuchsia-400 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-fuchsia-600 dark:text-purple-400 dark:focus:ring-purple-600">
        <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 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </nav>

  <!-- Mobile Menu (Hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-black dark:bg-gray-950 border-t-2 border-fuchsia-800 dark:border-purple-800 shadow-lg shadow-fuchsia-800/30">
    <div class="flex flex-col p-4 space-y-4">
      <a href="#gallery" class="block text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-fuchsia-800/50 dark:text-purple-400 dark:hover:text-purple-300 dark:border-purple-800/50">
        Gallery
      </a>
      <a href="#portfolio" class="block text-teal-400 hover:text-teal-300 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-teal-800/50 dark:text-teal-500 dark:hover:text-teal-400 dark:border-teal-800/50">
        Portfolio
      </a>
      <a href="#about" class="block text-orange-400 hover:text-orange-300 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-orange-800/50 dark:text-yellow-400 dark:hover:text-yellow-300 dark:border-yellow-800/50">
        About
      </a>
      <a href="#contact" class="block text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 dark:text-purple-400 dark:hover:text-purple-300">
        Contact
      </a>
    </div>
  </div>
</header>

<!-- Simple 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');
    });

    // Close menu when a link is clicked (optional)
    const menuLinks = menu.querySelectorAll('a');
    menuLinks.forEach(link => {
      link.addEventListener('click', () => {
        menu.classList.add('hidden');
      });
    });
  });
</script>