Brutalist_Triadic_Simple_Mega_Menu

<nav class="bg-violet-500 dark:bg-violet-900 text-yellow-300 dark:text-cyan-300 border-b-8 border-yellow-300 dark:border-cyan-300 relative z-50">
  <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row items-center justify-between">
    <div class="flex justify-between items-center w-full md:w-auto">
      <a href="#" class="text-4xl md:text-5xl font-extrabold tracking-tighter uppercase leading-none border-4 border-yellow-300 dark:border-cyan-300 px-3 py-1 bg-yellow-300 bg-opacity-20 dark:bg-cyan-300 dark:bg-opacity-20 text-yellow-300 dark:text-cyan-300">
        BLOG CO.
      </a>
      <button id="menu-toggle" class="md:hidden focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2">
        <svg class="w-8 h-8 text-yellow-300 dark:text-cyan-300" 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="3" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <div id="mega-menu-content" class="hidden md:flex flex-col md:flex-row md:items-center w-full md:w-auto mt-4 md:mt-0 space-y-4 md:space-y-0 md:space-x-8 lg:space-x-12 absolute md:static top-full left-0 right-0 bg-violet-600 dark:bg-violet-800 border-t-8 border-yellow-300 dark:border-cyan-300 md:border-none p-4 md:p-0">
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        Articles
      </a>
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        Categories
      </a>
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        About
      </a>
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        Contact
      </a>
    </div>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.getElementById('menu-toggle');
    const megaMenuContent = document.getElementById('mega-menu-content');

    menuToggle.addEventListener('click', function() {
      megaMenuContent.classList.toggle('hidden');
      megaMenuContent.classList.toggle('flex');
    });
  });
</script>