big card, elements list & page, navigation

client/src/components/Navigation.astro

@@ -0,0 +1,77 @@
+---
+// 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 Sport
+				</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>
+				<a href="/techniques" class="text-gray-600 hover:text-gray-900 transition-colors font-medium">
+					Techniques
+				</a>
+				<a href="/training" class="text-gray-600 hover:text-gray-900 transition-colors font-medium">
+					Training
+				</a>
+				<a href="/about" class="text-gray-600 hover:text-gray-900 transition-colors font-medium">
+					About
+				</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>
+				<a href="/techniques" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md font-medium">
+					Techniques
+				</a>
+				<a href="/training" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md font-medium">
+					Training
+				</a>
+				<a href="/about" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md font-medium">
+					About
+				</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>