Industrial_Monochromatic_Navigation

<header class="bg-gray-950 dark:bg-gray-950 text-gray-200 dark:text-gray-200 shadow-md sticky top-0 z-50">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap md:flex-nowrap">
    <!-- Logo & Brand Name -->
    <div class="flex items-center flex-shrink-0 mr-6 mb-4 md:mb-0">
      <svg class="h-8 w-8 mr-2 text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M9.504 1.134A1 1 0 0110 1h.496a1 1 0 01.496.504l.056.112.013.025.132.265.131.264.496.992.352.704.056.112.013.025.132.265.131.264.496.992.352.704a1 1 0 010 .984l-.352.704-.496.992-.131.264-.132.265-.013.025-.056.112-.352.704-.496.992-.131.264-.132.265-.013.025-.056.112a1 1 0 01-1.992 0l-.056-.112-.013-.025-.132-.265-.131-.264-.496-.992-.352-.704-.056-.112-.013-.025-.132-.265-.131-.264-.496-.992-.352-.704a1 1 0 010-.984l.352-.704.496-.992.131-.264.132-.265.013-.025.056-.112.352-.704.496-.992.131-.264.132-.265.013.025.056.112A1 1 0 019.504 1.134zM9.01 4.509a1 1 0 00-1.98 0l-.055.11-.013.027c-.122.247-.245.495-.367.742l-.244.492a1 1 0 000 .991l.244.492c.122.247.245.495.367.742l.013.027.055.11a1 1 0 001.98 0l.055-.11.013-.027c.122-.247.245-.495.367-.742l.244-.492a1 1 0 000-.991l-.244-.492c-.122-.247-.245-.495-.367-.742l-.013-.027-.055-.11zm-.056-.226l.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026a1 1 0 011.98 0l.013.026.059.119.006.012.006.012.013.026.059.119.006.012.006.012.013.026.059.119.006.012.006.012.013.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119c-.046-.093-.09-.187-.134-.281zm.056.226z" clip-rule="evenodd" />
      </svg>
      <span class="font-semibold text-xl tracking-tight text-blue-400 dark:text-blue-400">InnoManufac</span>
    </div>

    <!-- Mobile Menu Toggle -->
    <div class="block md:hidden mb-4 md:mb-0">
      <button class="navbar-toggler flex items-center px-3 py-2 border rounded text-gray-400 border-gray-600 hover:text-white hover:border-white"
        onclick="document.getElementById('mobile-menu').classList.toggle('hidden'); document.getElementById('mobile-menu').classList.toggle('flex');">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
        </svg>
      </button>
    </div>

    <!-- Main Navigation Links (Desktop & Mobile) -->
    <div id="mobile-menu" class="w-full flex-grow hidden md:flex md:items-center md:w-auto mt-4 md:mt-0 flex-col md:flex-row">
      <div class="text-sm md:flex-grow flex flex-col md:flex-row items-center">
        <a href="#dashboard" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Dashboard
        </a>
        <a href="#operations" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Operations
        </a>
        <a href="#analytics" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Analytics
        </a>
        <a href="#maintenance" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Maintenance
        </a>
        <a href="#inventory" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Inventory
        </a>
      </div>

      <!-- Search & User Profile -->
      <div class="flex items-center flex-col md:flex-row">
        <div class="relative mb-4 md:mb-0 md:mr-4 w-full md:w-auto">
          <input type="search" placeholder="Search anything..." class="bg-gray-800 dark:bg-gray-800 text-gray-300 dark:text-gray-300 rounded-md py-2 pl-10 pr-4 block w-full leading-normal placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300 ease-in-out">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
        
        <div class="flex items-center space-x-4">
          <!-- Notifications Dropdown (example) -->
          <div class="relative group">
            <button class="text-gray-400 dark:text-gray-400 hover:text-white dark:hover:text-white p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
              <svg class="h-6 w-6" 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 0a3 3 0 11-6 0m6 0v1h-6v-1m6 0H9"/></svg>
              <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">3</span>
            </button>
            <div class="absolute right-0 mt-2 w-72 bg-gray-800 dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight">New sensor data critical anomaly</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight border-t border-gray-700 dark:border-gray-700">Maintenance scheduled for Line 3</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight border-t border-gray-700 dark:border-gray-700">Daily production report available</a>
            </div>
          </div>

          <!-- User Profile Dropdown -->
          <div class="relative group">
            <button class="block w-10 h-10 rounded-full overflow-hidden border-2 border-gray-600 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-400 transition duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
              <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
            </button>
            <div class="absolute right-0 mt-2 w-48 bg-gray-800 dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700">Profile</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700">Settings</a>
              <a href="#" class="block px-4 py-2 text-sm text-red-400 dark:text-red-400 hover:bg-gray-700 dark:hover:bg-gray-700 border-t border-gray-700 dark:border-gray-700 mt-1 pt-2">Sign out</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</header>