汉堡菜单组件

<nav class="bg-stone-100 dark:bg-stone-800 shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between">
      <div class="flex space-x-7">
        <div>
          <!-- Website Logo -->
          <a href="#" class="flex items-center py-4 px-2">
            <span class="text-stone-500 dark:text-white text-lg font-semibold">Your Logo</span>
          </a>
        </div>
        <!-- Primary Navbar items -->
        <div class="hidden md:flex items-center space-x-1">
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Home</a>
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Services</a>
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">About</a>
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Contact Us</a>
        </div>
      </div>
      <!-- Secondary Navbar items -->
      <div class="hidden md:flex items-center space-x-3 ">
        <a href="" class="py-2 px-2 font-medium text-stone-500 dark:text-white rounded hover:bg-green-500 hover:text-white transition duration-300">Log In</a>
        <a href="" class="py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300">Sign Up</a>
      </div>
      <!-- Mobile menu button -->
      <div class="md:hidden flex items-center">
        <button class="outline-none mobile-menu-button">
          <svg class="w-6 h-6 text-stone-500 dark:text-white hover:text-green-500" x-show="!showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
          <svg class="w-6 h-6 text-stone-500 dark:text-white hover:text-green-500" x-show="showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- Mobile menu -->
  <div class="hidden mobile-menu">
    <ul class="">
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Home</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Services</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">About</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Contact Us</a></li>
    </ul>
  </div>
</nav>