ArtDécoPhotographieMegaMenu

<nav class="bg-emerald-800 dark:bg-gray-900 shadow-lg font-serif">
  <div class="container mx-auto px-4 py-2 flex justify-between items-center">
    <a href="#" class="text-ruby-300 dark:text-emerald-300 text-2xl font-bold tracking-wider uppercase transform skew-x-[-10deg]">
      <span class="block -skew-x-[10deg]">Reflections</span>
    </a>
    
    <!-- Mobile Menu Button -->
    <button id="menu-button" class="md:hidden text-emerald-100 dark:text-emerald-100 focus:outline-none">
      <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>

    <!-- Mega Menu - Desktop and Hidden Mobile -->
    <div id="mega-menu" class="hidden md:flex flex-col md:flex-row md:space-x-8 mt-4 md:mt-0">
      <div class="relative group">
        <button class="peer py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 focus:outline-none text-lg tracking-wide">Galleries</button>
        <div class="absolute hidden peer-hover:block hover:block w-48 md:w-96 lg:w-3/4 max-w-lg bg-emerald-700 dark:bg-gray-800 shadow-xl transition-all duration-300 ease-in-out transform scale-y-0 origin-top group-hover:scale-y-100 rounded-md py-4 mt-2 z-10">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 px-4">
            <div>
              <h3 class="text-sapphire-300 dark:text-sapphire-300 text-sm uppercase mb-2">Collections</h3>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Portraits</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Landscapes</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Abstract</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Candid</a>
            </div>
            <div>
              <h3 class="text-sapphire-300 dark:text-sapphire-300 text-sm uppercase mb-2">Featured Work</h3>
              <div class="mb-2"><img src="https://picsum.photos/150/100?random=1" alt="Featured Image 1" class="w-full h-auto rounded-sm"></div>
              <div class="mb-2"><img src="https://picsum.photos/150/100?random=2" alt="Featured Image 2" class="w-full h-auto rounded-sm"></div>
            </div>
          </div>
        </div>
      </div>

      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">Services</a>
      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">About</a>
      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">Contact</a>
    </div>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-button');
    const megaMenu = document.getElementById('mega-menu');

    menuButton.addEventListener('click', function() {
      megaMenu.classList.toggle('hidden');
      megaMenu.classList.toggle('flex');
      megaMenu.classList.toggle('flex-col');
    });
  });
</script>