汉堡菜单组件

<div class="relative bg-white dark:bg-gray-900 md:flex md:items-center md:justify-between p-4 shadow-md">
  <div class="flex items-center justify-between">
    <a href="#" class="text-2xl font-bold bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500 text-transparent bg-clip-text">
      Connectify
    </a>
    <!-- Mobile menu button -->
    <button id="menu-button" class="md:hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-400" aria-label="Toggle menu">
      <svg class="w-6 h-6 text-gray-800 dark:text-gray-200" 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>

  <!-- Mobile menu content -->
  <nav id="mobile-menu" class="hidden md:flex md:items-center md:space-x-8 mt-4 md:mt-0">
    <a href="#matches" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Matches</a>
    <a href="#chat" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Chat</a>
    <a href="#discover" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:shadow-outline rounded-lg md:inline md:mt-0">Discover</a>
    <a href="#profile" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Profile</a>
    <a href="#settings" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Settings</a>
  </nav>
</div>

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

    menuButton.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
    });
  });
</script>