<nav class="sticky top-0 z-50 w-full backdrop-blur-sm bg-lime-100/80 dark:bg-emerald-950/80 shadow-lg dark:shadow-emerald-700/30 font-sans">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-2 md:py-4 flex flex-col md:flex-row items-center justify-between">
<div class="flex items-center justify-between w-full md:w-auto mb-2 md:mb-0">
<a href="#" class="flex items-center space-x-2 text-emerald-800 dark:text-emerald-50 font-bold text-2xl md:text-3xl tracking-tight">
<svg class="w-8 h-8 md:w-10 md:h-10 text-emerald-600 dark:text-emerald-400 transform -rotate-12 transition-transform duration-300 ease-in-out" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm-1-11h2v6h-2zm0 8h2v2h-2z"/>
<path d="M12 11a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v5a1 1 0 0 1-1 1zm0 8a1 1 0 0 1-1-1v-2a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z" fill="url(#gradient)"/>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#10B981" />
<stop offset="100%" stop-color="#059669" />
</linearGradient>
</defs>
</svg>
<span class="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.2)] dark:drop-shadow-[0_1.2px_1.2px_rgba(255,255,255,0.1)]">MedCare</span>
</a>
<button id="navbar-toggle" class="md:hidden focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md p-2 transition-all duration-200 ease-in-out">
<svg class="w-7 h-7 text-emerald-700 dark:text-emerald-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>
<div id="navbar-menu" class="hidden md:flex flex-col md:flex-row md:items-center space-y-2 md:space-y-0 md:space-x-8 lg:space-x-12 w-full md:w-auto text-center md:text-left">
<a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
Home
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
<span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
</a>
<div class="relative group">
<button class="flex items-center text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md py-2 md:py-0">
Services
<svg class="ml-1 w-4 h-4 transition-transform duration-200 ease-in-out group-hover:rotate-180" 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>
<div class="absolute z-10 hidden group-hover:block bg-white dark:bg-emerald-900 shadow-xl dark:shadow-emerald-800/50 rounded-lg py-2 mt-2 w-48 transition-all duration-300 ease-out transform origin-top-left scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 perspective-100 rotate-x-5">
<a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
Consultation
</a>
<a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
Appointments
</a>
<a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
Health Records
</a>
</div>
</div>
<a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
About Us
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
<span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
</a>
<a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
Contact
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
<span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
</a>
<div class="flex items-center space-x-4 md:ml-auto mt-4 md:mt-0">
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-700 dark:text-emerald-200 shadow-md dark:shadow-emerald-950/50 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-transform duration-200 ease-in-out transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500">
<svg class="w-6 h-6 sun-icon" 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 12H2m15.325-4.573l.707-.707M3.929 19.071l.707-.707m-4.596 0l-.707.707M19.071 3.929l-.707.707M6 12a6 6 0 1112 0 6 6 0 01-12 0z"></path>
</svg>
<svg class="w-6 h-6 moon-icon hidden" 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="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>
</button>
<a href="#" class="flex items-center p-2 rounded-full bg-emerald-600 dark:bg-emerald-500 text-white shadow-md dark:shadow-emerald-950/50 hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500">
<img class="w-8 h-8 rounded-full object-cover mr-2 brightness-90 contrast-125 saturate-150" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<span class="text-sm font-medium hidden lg:block perspective-100 rotate-x-5">Dr. Smith</span>
<svg class="w-5 h-5 ml-2 hidden lg:block transition-transform transform rotate-90" 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="M5.121 17.804A11.952 11.952 0 0112 15c4.764 0 9.102 1.341 12 3.654-.539-7.243-7.533-13.654-15-13.654S-3.539 10.561-3 17.804zM12 10a4 4 0 100-8 4 4 0 000 8z"></path></svg>
</a>
</div>
</div>
</div>
</nav>
<script>
// Dark Mode Toggle Logic
const darkModeToggle = document.getElementById('dark-mode-toggle');
const sunIcon = darkModeToggle.querySelector('.sun-icon');
const moonIcon = darkModeToggle.querySelector('.moon-icon');
function setDarkMode(isDark) {
if (isDark) {
document.documentElement.classList.add('dark');
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
localStorage.setItem('theme', 'light');
}
}
// Check for saved theme or system preference
const preferredTheme = localStorage.getItem('theme');
if (preferredTheme === 'dark' || (!preferredTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
setDarkMode(true);
} else {
setDarkMode(false);
}
darkModeToggle.addEventListener('click', () => {
setDarkMode(!document.documentElement.classList.contains('dark'));
});
// Navbar Toggle Logic for Mobile
const navbarToggle = document.getElementById('navbar-toggle');
const navbarMenu = document.getElementById('navbar-menu');
navbarToggle.addEventListener('click', () => {
navbarMenu.classList.toggle('hidden');
navbarMenu.classList.toggle('flex');
});
// Close mobile menu when a link is clicked
navbarMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
if (!navbarMenu.classList.contains('hidden') && window.innerWidth < 768) { // Only close if mobile menu is open and on mobile size
navbarMenu.classList.add('hidden');
navbarMenu.classList.remove('flex');
}
});
});
</script>
