E-Commerce Industrielle Navigation

<header class="bg-white dark:bg-gray-950 shadow-md border-b-2 border-gray-200 dark:border-gray-800">
  <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
    <!-- Logo/Brand Section -->
    <div class="flex items-center flex-shrink-0">
      <a href="#" class="text-gray-900 dark:text-white text-3xl font-extrabold tracking-tight uppercase font-mono">
        <span class="text-orange-500">PRO</span>DUCTS
      </a>
    </div>

    <!-- Main Navigation & Search -->
    <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 w-full md:w-auto">
      <nav class="hidden md:flex space-x-6 lg:space-x-8">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          New Arrivals
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          Categories
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          Sale
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          About Us
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
      </nav>

      <div class="relative w-full md:w-80 lg:w-96">
        <input type="text" placeholder="Search products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white border-2 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-300 ease-in-out font-sans placeholder-gray-500 dark:placeholder-gray-400">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
          <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"></path>
        </svg>
      </div>
    </div>

    <!-- User Actions (Cart, Account, etc.) -->
    <div class="flex items-center space-x-6 pl-4 border-l-2 border-gray-200 dark:border-gray-800 hidden lg:flex">
      <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
        </svg>
        <span class="sr-only">Account</span>
      </a>
      <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48zM17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-orange-500 rounded-full">3</span>
        <span class="sr-only">Shopping Cart</span>
      </a>
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
          <path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
        </svg>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
    </div>

    <!-- Mobile Menu Toggle -->
    <div class="md:hidden flex items-center space-x-4">
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
          <path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
        </svg>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
      <button id="mobile-menu-button" class="text-gray-700 dark:text-gray-300 focus:outline-none focus:text-orange-500 dark:focus:text-orange-500">
        <svg class="w-8 h-8" 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 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (initially hidden) -->
  <div id="mobile-menu" class="hidden md:hidden px-4 pt-2 pb-4 space-y-2 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">New Arrivals</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Categories</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Sale</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">About Us</a>
    <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 pt-2 border-t border-gray-300 dark:border-gray-700">
      <a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
        </svg>
        Account
      </a>
      <a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
        </svg>
        Cart
        <span class="ml-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform bg-orange-500 rounded-full">3</span>
      </a>
    </div>
  </div>
</header>

<script>
  // Basic JavaScript for mobile menu toggle
  document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
      });

      // Close mobile menu when a link inside is clicked (optional)
      mobileMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          mobileMenu.classList.add('hidden');
        });
      });
    }
  });
</script>