59 lines
1.8 KiB
Plaintext
59 lines
1.8 KiB
Plaintext
---
|
|
// Navigation component for Pole Sport website
|
|
---
|
|
|
|
<nav class="bg-white shadow-lg">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex justify-between items-center py-4">
|
|
<!-- Logo/Brand -->
|
|
<div class="flex items-center">
|
|
<a href="/" class="text-xl font-bold text-gray-800 hover:text-gray-600 transition-colors">
|
|
Pole Book
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navigation Links -->
|
|
<div class="hidden md:flex space-x-8">
|
|
<a href="/" class="text-gray-600 hover:text-gray-900 transition-colors font-medium">
|
|
Home
|
|
</a>
|
|
<a href="/elements" class="text-gray-600 hover:text-gray-900 transition-colors font-medium">
|
|
Elements
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<div class="md:hidden">
|
|
<button id="mobile-menu-button" class="text-gray-600 hover:text-gray-900 focus:outline-none">
|
|
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
<div id="mobile-menu" class="md:hidden hidden">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
|
<a href="/" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md font-medium">
|
|
Home
|
|
</a>
|
|
<a href="/elements" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md font-medium">
|
|
Elements
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<script>
|
|
// Mobile menu toggle functionality
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
if (mobileMenuButton && mobileMenu) {
|
|
mobileMenuButton.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
}
|
|
</script> |