RetroDashboardナビゲーション

<header class="bg-[#FDB515] p-4 text-[#006400] dark:bg-[#00008B] dark:text-[#FDB515] shadow-lg font-mono tracking-widest relative z-50">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <div class="flex items-center justify-between w-full md:w-auto mb-4 md:mb-0">
      <a href="#" class="text-2xl font-bold uppercase flex items-center group">
        <span class="text-4xl leading-none mr-2 transform group-hover:scale-110 transition-transform duration-300">&#9650;</span>
        <span class="block relative group-hover:text-[#FFB5E8] transition-colors duration-300">
          Synth<span class="text-[#006400] dark:text-[#FFB5E8]">Net</span>
          <span class="absolute top-0 left-0 w-full h-full text-stroke-thin text-[#FFB5E8] opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="-webkit-text-stroke: 1px currentColor;">SynthNet</span>
        </span>
      </a>
      <button id="mobile-menu-button" class="md:hidden focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
        <svg class="w-8 h-8 text-[#006400] dark:text-[#FFB5E8] transition-colors 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="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <nav id="main-navigation" class="hidden md:flex flex-col md:flex-row items-center md:space-x-8 lg:space-x-12 w-full md:w-auto transition-all duration-300 ease-in-out md:block">
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Dashboard
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Analytics
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Reports
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <div class="relative group py-2 md:py-0 w-full text-center md:w-auto">
        <button class="nav-item text-lg flex items-center justify-center w-full md:w-auto relative focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
          Settings
          <svg class="w-5 h-5 ml-1 transition-transform group-hover:rotate-90 duration-300" 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>
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        </button>
        <div class="dropdown-menu absolute hidden top-full left-1/2 -translate-x-1/2 mt-2 w-48 bg-[#FDB515] dark:bg-[#00008B] dark:text-[#FFB5E8] border border-[#006400] dark:border-[#FFB5E8] shadow-lg rounded-md overflow-hidden animate-slide-down-fade origin-top-left group-hover:block transition-all duration-300 ease-in-out md:min-w-max">
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">User Profile</a>
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">System Prefs</a>
          <hr class="border-[#006400] dark:border-[#FFB5E8] opacity-50">
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">Logout</a>
        </div>
      </div>
    </nav>

    <div class="flex items-center space-x-4 ml-0 md:ml-auto mt-4 md:mt-0 w-full md:w-auto justify-center md:justify-end">
      <div class="relative group">
        <button class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400]">
          <svg class="w-6 h-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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
          </svg>
          <span class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full text-xs text-white flex items-center justify-center -mt-1 -mr-1 border border-[#FDB515] dark:border-[#00008B] animate-pulse">2</span>
        </button>
        <span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Notifications</span>
      </div>
      <div class="relative group">
        <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-[#006400] dark:border-[#FFB5E8] cursor-pointer hover:border-[#FFB5E8] dark:hover:border-[#006400] transition-colors duration-200 shadow-md hover:scale-105 duration-200" />
        <span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Profile</span>
      </div>
      <button id="dark-mode-toggle" class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400] flex items-center justify-center">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path class="sun-icon" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.675l-.707-.707M6.381 6.381l-.707-.707m11.314 11.314l-.707.707m-9.192 0l-.707.707M12 7a5 5 0 100 10 5 5 0 000-10z"></path>
          <path class="moon-icon hidden" 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>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
    </div>
  </div>
</header>

<style>
  @keyframes slide-down-fade {
    from { opacity: 0; transform: translateY(-10px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
  }

  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(10px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
  }

  .animate-slide-down-fade {
    animation: slide-down-fade 0.3s ease-out forwards;
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.2s ease-out forwards;
  }

  /* Retro text stroke effect for branding */
  .text-stroke-thin {
    -webkit-text-stroke: 0.5px currentColor;
    text-stroke: 0.5px currentColor;
  }

  /* Mobile menu responsiveness (JS controlled visibility) */
  @media (max-width: 767px) {
    .nav-item {
      /* Ensures full width clickable area on mobile */
      display: block;
      width: 100%;
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 0.5rem; /* spacing between items */
      background-color: rgba(255, 255, 255, 0.1); /* light background for mobile items */
      border-radius: 0.25rem;
    }
    .dark .nav-item {
      background-color: rgba(0, 0, 0, 0.1);
    }
    .nav-item:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
     .dark .nav-item:hover {
      background-color: rgba(0, 0, 0, 0.2);
    }

    .dropdown-menu {
        position: static !important; /* override absolute positioning */
        transform: none !important; /* override transform */
        width: 100% !important; /* full width */
        margin-top: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }
    .dropdown-menu a {
        padding-left: 2.5rem; /* indent dropdown items */
    }
  }

</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mainNavigation = document.getElementById('main-navigation');
    const darkModeToggle = document.getElementById('dark-mode-toggle');
    const sunIcon = darkModeToggle.querySelector('.sun-icon');
    const moonIcon = darkModeToggle.querySelector('.moon-icon');

    // Mobile menu toggle
    mobileMenuButton.addEventListener('click', () => {
      mainNavigation.classList.toggle('hidden');
      mainNavigation.classList.toggle('flex');
      if (mainNavigation.classList.contains('flex')) {
        mainNavigation.style.flexDirection = 'column'; // Ensure vertical stacking on mobile
      }
    });

    // Dark mode toggle
    const enableDarkMode = () => {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
      sunIcon.classList.add('hidden');
      moonIcon.classList.remove('hidden');
    };

    const disableDarkMode = () => {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
      sunIcon.classList.remove('hidden');
      moonIcon.classList.add('hidden');
    };

    // Initial theme setup
    if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      enableDarkMode();
    } else {
      disableDarkMode();
    }

    darkModeToggle.addEventListener('click', () => {
      if (document.documentElement.classList.contains('dark')) {
        disableDarkMode();
      } else {
        enableDarkMode();
      }
    });
  });
</script>