<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>
