Composant Mega Menu - Papier/Impression Retro Crypto

<nav class="bg-amber-50 dark:bg-zinc-800 font-serif shadow-md dark:shadow-lg transition-colors duration-300">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-200 text-2xl font-bold tracking-wider uppercase flex items-center">
      <svg class="w-6 h-6 mr-2 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
      CryptoInk
    </a>

    <!-- Mobile Menu Button -->
    <div class="lg:hidden">
      <button id="mobile-menu-button" class="text-stone-700 dark:text-stone-300 focus:outline-none focus:ring-2 focus:ring-yellow-600 rounded-md p-2">
        <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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop & Mobile Menu Content -->
    <div id="mega-menu-content" class="hidden lg:flex lg:items-center lg:space-x-8 absolute lg:static top-full left-0 w-full lg:w-auto bg-amber-50 dark:bg-zinc-800 lg:bg-transparent lg:dark:bg-transparent shadow-lg lg:shadow-none transition-all duration-300 ease-out z-50 transform -translate-y-full lg:translate-y-0 text-center lg:text-left py-4 lg:py-0 border-t lg:border-t-0 border-stone-200 dark:border-zinc-700">
      <ul class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 w-full">
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            Dashboard
          </a>
        </li>
        <li class="relative group">
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent group-hover:border-yellow-600 dark:group-hover:border-yellow-400 transition-colors duration-200 text-lg flex items-center justify-center lg:justify-start">
            Assets
            <svg class="ml-1 w-4 h-4 hidden lg:block" 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="M19 9l-7 7-7-7"></path></svg>
          </a>
          <div class="lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2 lg:mt-4 lg:w-64 lg:p-6 bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl dark:shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 scale-95 group-hover:scale-100 origin-top text-left border border-amber-200 dark:border-zinc-600">
            <div class="grid gap-4">
              <a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
                <p class="mb-1">My Portfolio</p>
                <p class="text-xs text-stone-600 dark:text-stone-400">View your crypto holdings.</p>
              </a>
              <a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
                <p class="mb-1">Transactions</p>
                <p class="text-xs text-stone-600 dark:text-stone-400">Track your past trades.</p>
              </a>
              <a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
                <p class="mb-1">Deposits/Withdrawals</p>
                <p class="text-xs text-stone-600 dark:text-stone-400">Manage funds.</p>
              </a>
            </div>
          </div>
        </li>
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            Trade
          </a>
        </li>
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            News
          </a>
        </li>
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            Support
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Simple JavaScript for mobile menu toggle (outside of the required HTML part, for functional demo) -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mega-menu-content');

    button.addEventListener('click', function() {
      menu.classList.toggle('hidden');
      menu.classList.toggle('translate-y-full'); // For initial offscreen position
      menu.classList.toggle('-translate-y-full'); // For initial offscreen position
      menu.classList.toggle('translate-y-0'); // For onscreen position
    });

    // Close menu when clicking outside on mobile
    document.addEventListener('click', function(event) {
      if (!menu.classList.contains('hidden') && !button.contains(event.target) && !menu.contains(event.target)) {
        menu.classList.add('hidden');
        menu.classList.add('-translate-y-full');
        menu.classList.remove('translate-y-0');
      }
    });

    // Close the menu when a link inside it is clicked on mobile
    menu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        if (!menu.classList.contains('hidden') && window.innerWidth < 1024) { // 1024px is Tailwind's 'lg' breakpoint
          menu.classList.add('hidden');
          menu.classList.add('-translate-y-full');
          menu.classList.remove('translate-y-0');
        }
      });
    });

    // Handle window resize to reset menu state for desktop
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 1024) {
        menu.classList.remove('hidden', '-translate-y-full', 'translate-y-0');
      } else {
        menu.classList.add('hidden', '-translate-y-full');
        menu.classList.remove('translate-y-0');
      }
    });
  });
</script>