GamingNavigationComponent

<nav class="bg-gradient-to-r from-green-700 via-emerald-800 to-teal-900 shadow-xl dark:from-green-900 dark:via-emerald-950 dark:to-teal-950 px-4 py-3 md:py-4 relative z-50 animate-fade-in-down">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- Logo -->
    <a href="#" class="flex items-center space-x-2 lg:space-x-3 transition-transform transform hover:scale-105 duration-300 ease-in-out">
      <svg class="w-8 h-8 md:w-10 md:h-10 text-white dark:text-gray-200 drop-shadow-md brightness-110" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm.052 4.908l-.754-.754a1 1 0 011.414-1.414l.707.707.707-.707a1 1 0 011.414 1.414l-.754.754-.754.754a1 1 0 01-1.414-1.414l.707-.707-.707-.707a1 1 0 01-1.414 1.414zM13 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
      </svg>
      <span class="font-extrabold text-2xl md:text-3xl text-white dark:text-gray-100 drop-shadow-lg font-['Orbitron',_sans-serif]">NexusPlay</span>
    </a>

    <!-- Mobile Menu Button -->
    <button id="mobile-menu-button" class="lg:hidden focus:outline-none text-white dark:text-gray-200 hover:text-emerald-300 focus:text-emerald-300 transition-colors duration-300 ease-in-out" aria-label="Toggle navigation">
      <svg class="w-7 h-7 md:w-8 md:h-8" 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>

    <!-- Navigation Links & User Actions Wrapper (Initially hidden on mobile) -->
    <div id="mobile-menu" class="hidden lg:flex flex-col lg:flex-row items-center lg:space-x-8 mt-4 lg:mt-0 w-full lg:w-auto transition-all duration-300 ease-linear origin-top scale-y-0 lg:scale-y-100 transform">
      <ul class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-8 text-lg lg:text-xl font-medium text-white dark:text-gray-200 w-full lg:w-auto border-t border-emerald-600 dark:border-emerald-800 lg:border-none pt-4 lg:pt-0">
        <li>
          <a href="#" class="block px-3 py-2 rounded-lg hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-300 ease-in-out transform hover:scale-105 group relative overflow-hidden">
            Games
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-300 dark:bg-emerald-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
          </a>
        </li>
         <li>
          <a href="#" class="block px-3 py-2 rounded-lg hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-300 ease-in-out transform hover:scale-105 group relative overflow-hidden">
            Community
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-300 dark:bg-emerald-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block px-3 py-2 rounded-lg hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-300 ease-in-out transform hover:scale-105 group relative overflow-hidden">
            Shop
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-300 dark:bg-emerald-500 transform scale-x-0 hidden group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block px-3 py-2 rounded-lg hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-300 ease-in-out transform hover:scale-105 group relative overflow-hidden">
            Support
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-300 dark:bg-emerald-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
          </a>
        </li>
      </ul>

      <div class="flex flex-col lg:flex-row items-center space-y-3 lg:space-y-0 lg:space-x-4 mt-4 lg:mt-0 w-full lg:w-auto">
        <!-- Search Bar (hidden on smaller mobile) -->
        <div class="relative hidden sm:block w-full lg:w-auto">
          <input type="text" placeholder="Search games..." class="w-full lg:w-48 xl:w-56 pl-10 pr-4 py-2 rounded-full bg-emerald-800 dark:bg-emerald-900 border border-emerald-600 dark:border-emerald-800 text-white dark:text-gray-200 placeholder-emerald-200 dark:placeholder-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 focus:border-transparent transition-all duration-300 ease-in-out text-base shadow-inner">
          <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-emerald-300 dark:text-emerald-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
          </svg>
        </div>

        <!-- Call to Action Buttons -->
        <button class="px-5 py-2 w-full lg:w-auto rounded-full bg-emerald-500 dark:bg-emerald-700 text-white dark:text-gray-100 font-semibold shadow-lg hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95 text-base whitespace-nowrap overflow-hidden text-ellipsis">
          Play Now
        </button>
        <button class="px-5 py-2 w-full lg:w-auto rounded-full bg-transparent border border-emerald-300 dark:border-emerald-500 text-emerald-100 dark:text-emerald-300 font-semibold shadow-md active:scale-95 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 text-base whitespace-nowrap overflow-hidden text-ellipsis">
          Sign Up
        </button>

        <!-- User Avatar with Dropdown (placeholder for JS functionality) -->
        <div class="relative group hidden sm:block">
          <button class="flex items-center space-x-2 focus:outline-none transition-transform transform hover:scale-105 duration-300 ease-in-out" aria-label="User menu">
            <img class="w-10 h-10 rounded-full border-2 border-emerald-300 dark:border-emerald-500 shadow-md transform hover:rotate-3 transition-transform duration-300 ease-in-out" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <span class="text-white dark:text-gray-200 font-semibold hidden md:inline">PlayerOne</span>
            <svg class="w-4 h-4 text-white dark:text-gray-200 hidden md:inline" 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>
          <!-- Dropdown content (can be implemented with JS for interactive behavior) -->
          <div class="absolute right-0 mt-2 w-48 bg-emerald-700 dark:bg-emerald-900 rounded-lg shadow-xl py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-out transform scale-y-0 origin-top group-hover:scale-y-100 border border-emerald-600 dark:border-emerald-800">
            <a href="#" class="block px-4 py-2 text-white dark:text-gray-200 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out text-base">Profile</a>
            <a href="#" class="block px-4 py-2 text-white dark:text-gray-200 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out text-base">Settings</a>
            <a href="#" class="block px-4 py-2 text-white dark:text-gray-200 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out text-base">Logout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<!-- Inline Script for mobile menu toggle (for demonstration, as requested for no JS, but necessary for menu functionality) -->
<style>
  /* Keyframe for fading in/down */
  @keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out both;
  }

  /* Tailwind's `hidden` is `display: none`. For transitions, we need `max-height` or `scaleY` */
  /* This is a simple toggle. For a true 'no-JS' solution, one would use CSS :target or equivalent, which is complex for navs. */
  /* Or rely on media queries, but that doesn't allow user interaction for collapsing. */
  /* The following style makes the mobile menu actually animate */
  #mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
  }
  #mobile-menu.open {
    max-height: 500px; /* Adjust based on content */
    opacity: 1;
    /* To make scaleY work with other styles, we toggle `hidden` class in JS */
    /* or explicitly set display: block/flex and let transition handle max-height/opacity/transform */
  }

  @media (min-width: 1024px) {
    #mobile-menu {
      max-height: none !important; /* override max-height for large screens */
      opacity: 1 !important;
      display: flex !important;
      transform: scaleY(1) !important;
    }
  }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    if (button && menu) {
      button.addEventListener('click', function () {
        menu.classList.toggle('hidden'); // Tailwind's 'hidden' class
        menu.classList.toggle('open'); // Custom class for max-height transition
        menu.classList.toggle('flex'); // Ensure flex display when open
        menu.classList.toggle('scale-y-0'); // ScaleY for transform transition
        menu.classList.toggle('scale-y-100');
      });

      // Close menu when clicking outside (optional, but good UX)
      document.addEventListener('click', function(event) {
        if (!menu.contains(event.target) && !button.contains(event.target) && menu.classList.contains('open')) {
          menu.classList.remove('open');
          menu.classList.add('hidden');
          menu.classList.remove('flex');
          menu.classList.remove('scale-y-100');
          menu.classList.add('scale-y-0');
        }
      });

      // Handle resize to ensure menu state is correct on desktop
      window.addEventListener('resize', function() {
        if (window.innerWidth >= 1024) { // Equivalent to lg breakpoint
          menu.classList.remove('hidden', 'open', 'scale-y-0');
          menu.classList.add('flex', 'scale-y-100');
        } else {
           // If navigating back to mobile size and menu was previously open, keep it consistent or close.
           // For simplicity, we'll just ensure it takes 'hidden' if not activated by button.
           // If 'open' is still there, it means user opened it before resizing.
           if (!menu.classList.contains('open')) {
              menu.classList.add('hidden');
              menu.classList.remove('flex');
              menu.classList.remove('scale-y-100');
              menu.classList.add('scale-y-0');
           }
        }
      });
    }
  });
</script>