粘滞导航组件

<nav class="sticky top-0 z-50 w-full backdrop-blur-sm bg-lime-100/80 dark:bg-emerald-950/80 shadow-lg dark:shadow-emerald-700/30 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-2 md:py-4 flex flex-col md:flex-row items-center justify-between">
    <div class="flex items-center justify-between w-full md:w-auto mb-2 md:mb-0">
      <a href="#" class="flex items-center space-x-2 text-emerald-800 dark:text-emerald-50 font-bold text-2xl md:text-3xl tracking-tight">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-emerald-600 dark:text-emerald-400 transform -rotate-12 transition-transform duration-300 ease-in-out" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm-1-11h2v6h-2zm0 8h2v2h-2z"/>
          <path d="M12 11a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v5a1 1 0 0 1-1 1zm0 8a1 1 0 0 1-1-1v-2a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z" fill="url(#gradient)"/>
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#10B981" />
              <stop offset="100%" stop-color="#059669" />
            </linearGradient>
          </defs>
        </svg>
        <span class="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.2)] dark:drop-shadow-[0_1.2px_1.2px_rgba(255,255,255,0.1)]">MedCare</span>
      </a>
      <button id="navbar-toggle" class="md:hidden focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md p-2 transition-all duration-200 ease-in-out">
        <svg class="w-7 h-7 text-emerald-700 dark:text-emerald-200" 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 id="navbar-menu" class="hidden md:flex flex-col md:flex-row md:items-center space-y-2 md:space-y-0 md:space-x-8 lg:space-x-12 w-full md:w-auto text-center md:text-left">
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        Home
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>
      <div class="relative group">
        <button class="flex items-center text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md py-2 md:py-0">
          Services
          <svg class="ml-1 w-4 h-4 transition-transform duration-200 ease-in-out group-hover:rotate-180" 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="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-emerald-900 shadow-xl dark:shadow-emerald-800/50 rounded-lg py-2 mt-2 w-48 transition-all duration-300 ease-out transform origin-top-left scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 perspective-100 rotate-x-5">
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Consultation
          </a>
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Appointments
          </a>
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Health Records
          </a>
        </div>
      </div>
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        About Us
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        Contact
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>

      <div class="flex items-center space-x-4 md:ml-auto mt-4 md:mt-0">
        <button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-700 dark:text-emerald-200 shadow-md dark:shadow-emerald-950/50 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-transform duration-200 ease-in-out transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500">
          <svg class="w-6 h-6 sun-icon" 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="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.573l.707-.707M3.929 19.071l.707-.707m-4.596 0l-.707.707M19.071 3.929l-.707.707M6 12a6 6 0 1112 0 6 6 0 01-12 0z"></path>
          </svg>
          <svg class="w-6 h-6 moon-icon hidden" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
          </svg>
        </button>
        <a href="#" class="flex items-center p-2 rounded-full bg-emerald-600 dark:bg-emerald-500 text-white shadow-md dark:shadow-emerald-950/50 hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500">
            <img class="w-8 h-8 rounded-full object-cover mr-2 brightness-90 contrast-125 saturate-150" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
            <span class="text-sm font-medium hidden lg:block perspective-100 rotate-x-5">Dr. Smith</span>
            <svg class="w-5 h-5 ml-2 hidden lg:block transition-transform transform rotate-90" 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="M5.121 17.804A11.952 11.952 0 0112 15c4.764 0 9.102 1.341 12 3.654-.539-7.243-7.533-13.654-15-13.654S-3.539 10.561-3 17.804zM12 10a4 4 0 100-8 4 4 0 000 8z"></path></svg>
        </a>
      </div>
    </div>
  </div>
</nav>

<script>
  // Dark Mode Toggle Logic
  const darkModeToggle = document.getElementById('dark-mode-toggle');
  const sunIcon = darkModeToggle.querySelector('.sun-icon');
  const moonIcon = darkModeToggle.querySelector('.moon-icon');

  function setDarkMode(isDark) {
    if (isDark) {
      document.documentElement.classList.add('dark');
      sunIcon.classList.add('hidden');
      moonIcon.classList.remove('hidden');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      sunIcon.classList.remove('hidden');
      moonIcon.classList.add('hidden');
      localStorage.setItem('theme', 'light');
    }
  }

  // Check for saved theme or system preference
  const preferredTheme = localStorage.getItem('theme');
  if (preferredTheme === 'dark' || (!preferredTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    setDarkMode(true);
  } else {
    setDarkMode(false);
  }

  darkModeToggle.addEventListener('click', () => {
    setDarkMode(!document.documentElement.classList.contains('dark'));
  });

  // Navbar Toggle Logic for Mobile
  const navbarToggle = document.getElementById('navbar-toggle');
  const navbarMenu = document.getElementById('navbar-menu');

  navbarToggle.addEventListener('click', () => {
    navbarMenu.classList.toggle('hidden');
    navbarMenu.classList.toggle('flex');
  });

  // Close mobile menu when a link is clicked
  navbarMenu.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
      if (!navbarMenu.classList.contains('hidden') && window.innerWidth < 768) { // Only close if mobile menu is open and on mobile size
        navbarMenu.classList.add('hidden');
        navbarMenu.classList.remove('flex');
      }
    });
  });

</script>