Sticky Navigation 구성 요소

<header class="sticky top-0 z-50 bg-emerald-100/90 backdrop-blur-sm shadow-sm dark:bg-emerald-950/90 dark:shadow-lg transition-colors duration-300">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-8">
      <a href="#" class="flex items-center group">
        <svg class="h-8 w-8 text-emerald-600 dark:text-emerald-300 group-hover:rotate-6 transition-transform duration-200 ease-out" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM5.293 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L10 9.586l-1.293-1.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="ml-2 text-2xl font-bold tracking-tight text-emerald-800 dark:text-emerald-100 group-hover:text-emerald-600 dark:group-hover:text-emerald-200 transition-colors duration-200">MarketPulse</span>
      </a>
      <ul class="hidden md:flex space-x-6">
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Products
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Categories
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Vendors
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
      </ul>
    </div>

    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Search">
        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Cart">
        <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13H4m0 0l2 2m-2-2a2 2 0 100 4 2 2 0 000-4zM17 13h-4m4 0l-2 2m2-2a2 2 0 100 4 2 2 0 000-4z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hidden md:block bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="User Profile">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="h-7 w-7 rounded-full object-cover border border-emerald-300 dark:border-emerald-700">
      </button>
      <div class="flex items-center space-x-2">
        <button id="dark-mode-toggle" aria-label="Toggle dark mode" class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105">
          <svg class="h-6 w-6 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
          </svg>
          <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 4a1 1 0 011 1v1a1 1 0 11-2 0V7a1 1 0 011-1zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm15 0a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1zM9 16a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.586 5.586a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414 0l-.707-.707zm5.657 8.947a1 1 0 01-1.414 0l-.707-.707a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-.707.707zM4 10a6 6 0 1112 0 6 6 0 01-12 0z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
      <button class="md:hidden p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Open menu">
        <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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </nav>
</header>

<script>
  // Dark mode functionality (optional, not part of the HTML/CSS requirement but common for such components)
  const toggleDarkMode = () => {
    if (document.documentElement.classList.contains('dark')) {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    } else {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    }
  };

  const darkLightToggle = document.getElementById('dark-mode-toggle');
  if (darkLightToggle) {
    darkLightToggle.addEventListener('click', toggleDarkMode);
  }

  // Apply saved theme on load
  if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
</script>