E-commerce Matériel Design Navigation

<header class="bg-white dark:bg-gray-900 shadow-md font-sans w-full">
  <div class="container mx-auto px-4 py-3 sm:py-4 flex flex-wrap items-center justify-between">
    <!-- Logo & Brand Name -->
    <a href="#" class="flex items-center text-gray-900 dark:text-white text-2xl font-bold tracking-tight">
      <svg class="h-8 w-8 mr-2 text-indigo-600 dark:text-indigo-400" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3.5 16.5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm7 0c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm-3.5-5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5z"/>
      </svg>
      ShopHere
    </a>

    <!-- Search Bar (Desktop/Tablet) -->
    <div class="hidden md:flex flex-grow max-w-lg mx-4">
      <div class="relative w-full">
        <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 shadow-sm">
        <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 dark:text-gray-400" 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"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Right-aligned Icons (Profile, Cart, etc.) -->
    <div class="flex items-center space-x-4 sm:space-x-6">
      <!-- User Profile Dropdown -->
      <div class="relative group">
        <button class="flex items-center p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
          <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </button>
        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-right">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">My Profile</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Orders</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Wishlist</a>
          <hr class="my-1 border-gray-200 dark:border-gray-700">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Sign Out</a>
        </div>
      </div>

      <!-- Cart Icon -->
      <a href="#" class="relative p-2 rounded-full text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
        </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 dark:bg-red-500 dark:text-white transform translate-x-1/2 -translate-y-1/2">3</span>
      </a>

      <!-- Mobile Menu Button -->
      <div class="md:hidden">
        <button id="mobile-menu-button" class="p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
            <path id="mobile-menu-open-icon" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
            <path id="mobile-menu-close-icon" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Mobile Search Bar -->
    <div class="w-full mt-3 md:hidden">
      <div class="relative w-full">
        <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 shadow-sm">
        <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 dark:text-gray-400" 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"/>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Navigation Links -->
  <nav id="main-navigation" class="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 h-0 hidden md:flex md:h-auto overflow-hidden transition-all duration-300 ease-linear-out md:overflow-visible" style="opacity: 0;">
    <div class="container mx-auto px-4 py-2">
      <ul class="flex flex-col md:flex-row md:justify-around lg:justify-center md:space-x-8 lg:space-x-12">
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            Home
          </a>
        </li>
        <li class="relative group">
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0 flex items-center">
            Categories
            <svg class="ml-1 h-4 w-4 transform group-hover:rotate-180 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
            </svg>
          </a>
          <div class="absolute left-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-left">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Electronics</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Apparel</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Home Goods</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Books</a>
          </div>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            Deals
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            New Arrivals
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            Contact
          </a>
        </li>
      </ul>
    </div>
  </nav>
</header>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mainNavigation = document.getElementById('main-navigation');
    const openIcon = document.getElementById('mobile-menu-open-icon');
    const closeIcon = document.getElementById('mobile-menu-close-icon');

    mobileMenuButton.addEventListener('click', () => {
      const isHidden = mainNavigation.classList.contains('hidden');
      if (isHidden) {
        mainNavigation.classList.remove('hidden');
        mainNavigation.style.height = mainNavigation.scrollHeight + 'px'; // Set height for smooth transition
        mainNavigation.style.opacity = '1';
        openIcon.classList.add('hidden');
        closeIcon.classList.remove('hidden');
      } else {
        mainNavigation.style.height = '0'; // Collapse height
        mainNavigation.style.opacity = '0';
        // Wait for transition to complete before hiding fully
        mainNavigation.addEventListener('transitionend', () => {
          if (mainNavigation.style.height === '0px') {
            mainNavigation.classList.add('hidden');
          }
        }, { once: true });
        openIcon.classList.remove('hidden');
        closeIcon.classList.add('hidden');
      }
    });

    // Handle window resize to collapse/show menu for desktop
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 768) { // md breakpoint
        mainNavigation.classList.remove('hidden');
        mainNavigation.style.height = 'auto'; // Reset height for desktop
        mainNavigation.style.opacity = '1';
        openIcon.classList.remove('hidden'); // Ensure menu button is in 3-line state on desktop
        closeIcon.classList.add('hidden');
      } else {
        if (!mainNavigation.classList.contains('hidden')) {
            // If menu is open on mobile, collapse it when resizing to smaller than md
            mainNavigation.style.height = '0';
            mainNavigation.style.opacity = '0';
            mainNavigation.addEventListener('transitionend', () => {
              if (mainNavigation.style.height === '0px') {
                mainNavigation.classList.add('hidden');
              }
            }, { once: true });
            openIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
        }
      }
    });
  });
</script>