Glassmorphism_Pastel_Mega_Menu

<nav class="bg-gradient-to-br from-purple-100/60 to-blue-100/60 backdrop-blur-lg dark:from-purple-900/60 dark:to-blue-900/60 dark:text-gray-100 p-4 transition-colors duration-300">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-lg font-semibold text-purple-800 dark:text-purple-200 transition-colors duration-300">Dashboard</div>

    <!-- Mobile Menu Button -->
    <button id="menu-button" class="md:hidden focus:outline-none dark:text-gray-200" aria-label="Toggle menu">
      <svg class="w-6 h-6" 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>

    <!-- Mega Menu Content -->
    <div id="mega-menu" class="hidden md:flex md:items-center md:space-x-8 absolute md:relative top-full left-0 w-full md:w-auto mt-2 md:mt-0 p-4 md:p-0
                            bg-gradient-to-br from-purple-50/70 to-blue-50/70 backdrop-blur-lg dark:from-purple-950/70 dark:to-blue-950/70
                            shadow-lg md:shadow-none rounded-lg md:rounded-none transition-all duration-300 ease-in-out transform md:transform-none
                            opacity-0 md:opacity-100 scale-95 md:scale-100 origin-top md:origin-center">
      <div class="flex flex-col md:flex-row md:space-x-8 space-y-4 md:space-y-0 w-full">

        <!-- Section 1: Overview -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Overview</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Analytics</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Reports</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Summary</a></li>
          </ul>
        </div>

        <!-- Section 2: Management -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Management</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Users</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Settings</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Integrations</a></li>
          </ul>
        </div>

        <!-- Section 3: Quick Links -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Quick Links</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Help Center</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Feedback</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Contact Support</a></li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</nav>

<!-- Script for mobile menu toggle (pure CSS solution is complex for mega menus without JS) -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.getElementById('menu-button');
    const megaMenu = document.getElementById('mega-menu');

    menuButton.addEventListener('click', () => {
      const isHidden = megaMenu.classList.contains('hidden');
      if (isHidden) {
        megaMenu.classList.remove('hidden', 'opacity-0', 'scale-95');
        megaMenu.classList.add('flex', 'opacity-100', 'scale-100');
      } else {
        megaMenu.classList.add('opacity-0', 'scale-95');
        megaMenu.classList.remove('opacity-100', 'scale-100', 'flex');
        // Using a timeout to ensure transition plays before hiding completely
        setTimeout(() => {
          megaMenu.classList.add('hidden');
        }, 300); // Should match the transition duration
      }
    });
  });
</script>