Klebrige Navigationskomponente - Neumorphes Pastell

<header class="sticky top-0 z-50 bg-gray-100 p-4 shadow-xl dark:bg-gray-800 transition-colors duration-300 md:px-8">
  <nav class="container mx-auto flex items-center justify-between flex-wrap">
    <div class="flex items-center flex-shrink-0 text-gray-800 dark:text-gray-200 mr-6">
      <a href="#" class="font-bold text-2xl tracking-tight text-pink-500 dark:text-purple-400 drop-shadow-md">Doc<span class="text-blue-400 dark:text-teal-300">Wiki</span></a>
    </div>

    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-400 hover:text-gray-900 hover:border-gray-900 dark:text-gray-400 dark:border-gray-500 dark:hover:text-gray-100 dark:hover:border-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 group">
        <svg class="fill-current h-3 w-3 group-hover:text-blue-500 dark:group-hover:text-teal-400" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
      </button>
    </div>

    <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden transition-all duration-300 ease-in-out" id="navbar-collapse">
      <ul class="text-sm lg:flex-grow lg:flex lg:justify-end lg:items-center">
        <li class="relative group lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
            tabindex="0">
            Features
            <svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 transition-transform duration-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="M19 9l-7 7-7-7"></path>
            </svg>
          </a>
          <div class="lg:absolute lg:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Overview</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">API Reference</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Integrations</a>
          </div>
        </li>
        <li class="relative group lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
            tabindex="0">
            Guides
            <svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 transition-transform duration-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="M19 9l-7 7-7-7"></path>
            </svg>
          </a>
          <div class="lg:absolute lg:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Getting Started</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Best Practices</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Troubleshooting</a>
          </div>
        </li>
        <li class="lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
            Community
          </a>
        </li>
        <li class="lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
            Blog
          </a>
        </li>
      </ul>
      <div class="mt-4 lg:mt-0 flex items-center">
        <div class="relative w-full lg:max-w-xs">
          <input type="search" placeholder="Search..." class="block w-full pl-10 pr-4 py-2 rounded-full text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 border-none 
            shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
            focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-teal-500 transition-all duration-200 placeholder-gray-500 dark:placeholder-gray-400">
          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400">
            <svg class="h-5 w-5" 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>
          </div>
        </div>
        <button class="ml-4 p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 
          shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md 
          active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark 
          hover:text-blue-500 dark:hover:text-teal-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 transition-all duration-200">
          <svg class="h-5 w-5" 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 12H2m8.058-9.058l1.414-1.414M12.942 21.058l-1.414 1.414M21.058 12.942l-1.414 1.414M2.942 11.058l1.414-1.414M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"></path></svg>
          <span class="sr-only">Toggle Dark Mode</span>
        </button>
        <a href="#" class="ml-4 p-1 rounded-full 
          shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md 
          active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark 
          transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400">
          <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <span class="sr-only">User Profile</span>
        </a>
      </div>
    </div>
  </nav>
</header>

<style>
  /* Base light neumorphic shadows */
  .shadow-neumorphic-light-sm {
    box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
  }
  .shadow-neumorphic-light-md {
    box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-light-xl {
    box-shadow: 10px 10px 20px #b8b8b8, -10px -10px 20px #ffffff;
  }

  /* Inset light neumorphic shadows */
  .shadow-neumorphic-inset-light {
    box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
  }

  /* Base dark neumorphic shadows */
  .dark .shadow-neumorphic-dark-sm {
    box-shadow: 3px 3px 6px #4d4d4d, -3px -3px 6px #2d2d2d;
  }
  .dark .shadow-neumorphic-dark-md {
    box-shadow: 5px 5px 10px #4d4d4d, -5px -5px 10px #2d2d2d;
  }
  .dark .shadow-neumorphic-dark-xl {
    box-shadow: 10px 10px 20px #4d4d4d, -10px -10px 20px #2d2d2d;
  }

  /* Inset dark neumorphic shadows */
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 3px 3px 6px #4d4d4d, inset -3px -3px 6px #2d2d2d;
  }

  /* Override Tailwind shadow for header shadow-xl */
  .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  }

  /* Hamburger menu JS to toggle content */
  @media (max-width: 1023px) {
    .lg\:hidden + div {
      display: none;
    }
    .lg\:hidden + div.active {
      display: block;
    }
  }

  /* Simple JS for mobile menu and dark mode toggle */
  document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.querySelector('.lg\:hidden button');
    const navCollapse = document.getElementById('navbar-collapse');
    const darkModeToggle = document.querySelector('button[aria-label="Toggle Dark Mode"]');

    // Mobile menu toggle
    if (menuButton && navCollapse) {
      menuButton.addEventListener('click', () => {
        navCollapse.classList.toggle('hidden');
        if (!navCollapse.classList.contains('hidden')) {
          navCollapse.classList.add('active'); // Add active for custom CSS display
        } else {
          navCollapse.classList.remove('active');
        }
      });
    }

    // Dark mode toggle
    if (darkModeToggle) {
      darkModeToggle.addEventListener('click', () => {
        document.documentElement.classList.toggle('dark');
        // Save preference (optional)
        if (document.documentElement.classList.contains('dark')) {
          localStorage.setItem('theme', 'dark');
        } else {
          localStorage.setItem('theme', 'light');
        }
      });

      // Apply saved theme on load (optional)
      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');
      }
    }

    // Close dropdowns when clicking outside (basic, for demonstration)
    document.addEventListener('click', (e) => {
      document.querySelectorAll('.group.relative').forEach(dropdown => {
        if (!dropdown.contains(e.target)) {
          dropdown.querySelector('div')?.classList.remove('opacity-100', 'visible', 'scale-y->100');
          dropdown.querySelector('div')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
          dropdown.querySelector('a svg')?.classList.remove('rotate-180');
        }
      });
    });


    // For accessibility/keyboard navigation for dropdowns (complex; basic example)
    document.querySelectorAll('.group.relative > a').forEach(link => {
      link.addEventListener('focus', () => {
        link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-100', 'visible', 'scale-y-100');
        link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-0', 'invisible', 'scale-y-75');
      });

      link.addEventListener('blur', (event) => {
        if (!link.parentElement.contains(event.relatedTarget)) {
          link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-100', 'visible', 'scale-y-100');
          link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
        }
      });
    });
  });
<\/style>