Portfolio-Navigation im Dunkelmodus

<nav class="bg-gray-800 dark:bg-gray-950 shadow-lg dark:shadow-xl">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <a href="#" class="flex-shrink-0 text-white text-2xl font-bold tracking-wider">
          Portfolio
        </a>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Home</a>
            <div class="relative group">
              <button class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300 flex items-center">
                Projects
                <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 010-1.06z" clip-rule="evenodd" />
                </svg>
              </button>
              <div class="absolute hidden group-hover:block z-10 mt-2 w-48 rounded-md shadow-lg py-1 bg-gray-800 dark:bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none transition-opacity duration-300 opacity-0 group-hover:opacity-100 transform scale-95 group-hover:scale-100">
                <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Web Development</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">UI/UX Design</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Graphic Design</a>
              </div>
            </div>
            <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">About</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Contact</a>
          </div>
        </div>
      </div>
      <div class="hidden md:block">
        <div class="ml-4 flex items-center md:ml-6">
          <button type="button" class="relative p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white transition-colors duration-300">
            <span class="absolute -inset-1.5"></span>
            <span class="sr-only">View notifications</span>
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
            </svg>
          </button>

          <!-- Profile dropdown -->
          <div class="relative ml-3 group">
            <div>
              <button type="button" class="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                <span class="absolute -inset-1.5"></span>
                <span class="sr-only">Open user menu</span>
                <img class="h-8 w-8 rounded-full"
                  src="https://randomuser.me/api/portraits/men/45.jpg"
                  alt="User Avatar">
              </button>
            </div>

            <div class="absolute hidden group-hover:block right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-gray-800 dark:bg-gray-900 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transition-opacity duration-300 opacity-0 group-hover:opacity-100 transform scale-95 group-hover:scale-100" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
              <button class="dark-mode-toggle block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition duration-300" role="menuitem" tabindex="-1" id="user-menu-item-2">
                Toggle Dark Mode
              </button>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-3">Sign out</a>
            </div>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" aria-controls="mobile-menu" aria-expanded="false">
          <span class="absolute -inset-0.5"></span>
          <span class="sr-only">Open main menu</span>
          <!-- Menu open: "hidden", Menu closed: "block" -->
          <svg class="block h-6 w-6 menu-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
          <!-- Menu open: "block", Menu closed: "hidden" -->
          <svg class="hidden h-6 w-6 close-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden hidden mobile-menu" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">Home</a>
      <div class="relative group">
        <button class="flex items-center w-full text-left text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">
          Projects
          <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 010-1.06z" clip-rule="evenodd" />
          </svg>
        </button>
        <div class="pl-6 py-1 mobile-submenu hidden">
          <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Web Development</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">UI/UX Design</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Graphic Design</a>
        </div>
      </div>
      <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">About</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">Contact</a>
    </div>
    <div class="border-t border-gray-700 pb-3 pt-4">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-white">John Doe</div>
          <div class="text-sm font-medium leading-none text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
        </button>
      </div>
      <div class="mt-3 space-y-1 px-2">
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Your Profile</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Settings</a>
        <button class="dark-mode-toggle block w-full text-left rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 transition duration-300">
          Toggle Dark Mode
        </button>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Sign out</a>
      </div>
    </div>
  </div>
</nav>

<script>
  // Dark mode toggle functionality
  const darkModeToggleButtons = document.querySelectorAll('.dark-mode-toggle');

  darkModeToggleButtons.forEach(button => {
    button.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
      // Store user preference in local storage
      if (document.documentElement.classList.contains('dark')) {
        localStorage.theme = 'dark';
      } else {
        localStorage.theme = 'light';
      }
    });
  });

  // Check for stored theme preference on load
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }

  // Mobile menu toggle functionality
  const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
  const mobileMenu = document.getElementById('mobile-menu');
  const menuIcon = mobileMenuButton.querySelector('.menu-icon');
  const closeIcon = mobileMenuButton.querySelector('.close-icon');

  mobileMenuButton.addEventListener('click', () => {
    const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true' || false;
    mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
    mobileMenu.classList.toggle('hidden');
    menuIcon.classList.toggle('hidden');
    closeIcon.classList.toggle('hidden');
  });

  // Mobile submenu toggle functionality (simple for demonstration)
  const mobileProjectsButton = document.querySelector('#mobile-menu .group button');
  const mobileSubmenu = document.querySelector('#mobile-menu .mobile-submenu');

  if (mobileProjectsButton) {
    mobileProjectsButton.addEventListener('click', () => {
      mobileSubmenu.classList.toggle('hidden');
    });
  }
</script>