Industrial_Agriculture_Hamburger_Menu

<div class="relative bg-gradient-to-br from-orange-600 via-red-700 to-yellow-600 dark:from-gray-900 dark:via-zinc-800 dark:to-stone-900 text-stone-100 dark:text-stone-300 md:rounded-lg shadow-xl overflow-hidden">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="font-black text-2xl tracking-tighter uppercase text-stone-900 dark:text-orange-500 hover:text-stone-800 dark:hover:text-orange-400 transition duration-300">Agri<span class="text-stone-100 dark:text-white">Connect</span></a>
      <span class="hidden md:block text-stone-900 text-opacity-70 dark:text-orange-200 dark:text-opacity-50 text-sm italic">Cultivating the Future</span>
    </div>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex space-x-8 lg:space-x-12">
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Dashboard</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Farms</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Crops</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Analytics</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Marketplace</a>
    </nav>

    <!-- User Actions and Mobile Toggle -->
    <div class="flex items-center space-x-4">
      <div class="hidden md:flex items-center space-x-3">
        <button class="p-2 rounded-full ring-2 ring-stone-900 dark:ring-orange-500 text-stone-900 dark:text-orange-500 hover:bg-stone-900 hover:text-orange-300 dark:hover:bg-orange-500 dark:hover:text-stone-900 transition duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-stone-900 dark:focus:ring-orange-500">
          <svg class="w-5 h-5" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
          </svg>
        </button>
        <div class="relative group">
          <img class="w-8 h-8 rounded-full ring-2 ring-stone-900 dark:ring-orange-500 cursor-pointer object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <div class="absolute hidden group-hover:block right-0 mt-2 w-48 bg-stone-800 dark:bg-stone-900 border border-stone-700 dark:border-stone-800 rounded-md shadow-lg py-1 z-20 transition-opacity duration-300 opacity-0 group-hover:opacity-100">
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Settings</a>
            <div class="border-t border-stone-700 dark:border-stone-800 my-1"></div>
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Sign Out</a>
          </div>
        </div>
      </div>
      
      <button id="mobile-menu-button" class="md:hidden p-2 rounded-md ring-2 ring-stone-900 dark:ring-orange-500 text-stone-900 dark:text-orange-500 hover:bg-stone-900 hover:text-orange-300 dark:hover:bg-orange-500 dark:hover:text-stone-900 transition duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-stone-900 dark:focus:ring-orange-500">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path id="mobile-menu-icon-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
          <path id="mobile-menu-icon-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default) -->
  <nav id="mobile-menu" class="hidden md:hidden absolute left-0 w-full bg-stone-900 dark:bg-stone-950/95 border-t border-stone-800 dark:border-stone-800 py-4 z-10 animate-fade-in-down">
    <div class="px-4 flex flex-col space-y-4">
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Dashboard</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Farms</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Crops</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Analytics</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Marketplace</a>
      
      <div class="pt-4 border-t border-stone-800 dark:border-stone-700 mt-4 flex flex-col space-y-3">
        <a href="#" class="flex items-center space-x-2 py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">
          <img class="w-7 h-7 rounded-full ring-1 ring-orange-500 object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <span>My Profile</span>
        </a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Notifications</a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Settings</a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Sign Out</a>
      </div>
    </div>
  </nav>

  <!-- Simple toggle script for demonstration, in a real app this would be in a JS file -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const button = document.getElementById('mobile-menu-button');
      const menu = document.getElementById('mobile-menu');
      const iconOpen = document.getElementById('mobile-menu-icon-open');
      const iconClose = document.getElementById('mobile-menu-icon-close');

      button.addEventListener('click', function() {
        menu.classList.toggle('hidden');
        iconOpen.classList.toggle('hidden');
        iconClose.classList.toggle('hidden');
      });
    });
  </script>
</div>