refactor: Simplify Navigation component with helper functions

- Extract complex conditional logic into getNavLinkClasses helper
- Create navItems configuration array for DRY principle
- Replace repetitive navigation links with map function
- Improve maintainability and readability
- Reduce code duplication in desktop and mobile navigation

Author: RichLewis007

src/components/Navigation.astro

@@ -2,6 +2,27 @@
 const currentPath = Astro.url.pathname;
 const isActive = (path: string) =>
   currentPath === path || currentPath.startsWith(path + "/");
+
+// Helper function to generate navigation link classes
+const getNavLinkClasses = (path: string) => {
+  const baseClasses = "px-4 py-2 rounded-lg font-medium transition-colors";
+  const activeClasses = "bg-blue-100 text-blue-700";
+  const inactiveClasses = "text-gray-700 hover:bg-gray-100";
+
+  return `${baseClasses} ${isActive(path) ? activeClasses : inactiveClasses}`;
+};
+
+// Navigation items configuration
+const navItems = [
+  { href: "/", label: "Home" },
+  { href: "/about", label: "About" },
+  { href: "/projects", label: "Projects" },
+  { href: "/makers", label: "Makers" },
+  { href: "/makerspaces", label: "MakerSpaces" },
+  { href: "/blog", label: "Blog" },
+  { href: "/store", label: "Store" },
+  { href: "/contact", label: "Contact" },
+];
 ---
 
 <nav class="bg-white/90 backdrop-blur-sm shadow-lg sticky top-0 z-50">
@@ -25,54 +46,13 @@ const isActive = (path: string) =>
 
       <!-- Desktop Navigation -->
       <div class="hidden md:flex items-center space-x-1">
-        <a
-          href="/"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/") && currentPath === "/" ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Home
-        </a>
-        <a
-          href="/about"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/about") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          About
-        </a>
-        <a
-          href="/projects"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/projects") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Projects
-        </a>
-        <a
-          href="/makers"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/makers") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Makers
-        </a>
-        <a
-          href="/makerspaces"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/makerspaces") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          MakerSpaces
-        </a>
-        <a
-          href="/blog"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/blog") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Blog
-        </a>
-        <a
-          href="/store"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/store") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Store
-        </a>
-        <a
-          href="/contact"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/contact") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Contact
-        </a>
+        {
+          navItems.map((item) => (
+            <a href={item.href} class={getNavLinkClasses(item.href)}>
+              {item.label}
+            </a>
+          ))
+        }
         <a
           href="/donate"
           class="ml-2 px-6 py-2 bg-gradient-to-r from-pink-500 to-purple-600 text-white rounded-lg font-semibold hover:shadow-lg transition-all hover:scale-105"
@@ -111,54 +91,13 @@ const isActive = (path: string) =>
     <!-- Mobile Navigation -->
     <div id="mobile-menu" class="hidden md:hidden pb-4">
       <div class="flex flex-col space-y-2">
-        <a
-          href="/"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/") && currentPath === "/" ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Home
-        </a>
-        <a
-          href="/about"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/about") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          About
-        </a>
-        <a
-          href="/projects"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/projects") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Projects
-        </a>
-        <a
-          href="/makers"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/makers") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Makers
-        </a>
-        <a
-          href="/makerspaces"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/makerspaces") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          MakerSpaces 🏭
-        </a>
-        <a
-          href="/blog"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/blog") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Blog
-        </a>
-        <a
-          href="/store"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/store") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Store 🛍️
-        </a>
-        <a
-          href="/contact"
-          class={`px-4 py-2 rounded-lg font-medium transition-colors ${isActive("/contact") ? "bg-blue-100 text-blue-700" : "text-gray-700 hover:bg-gray-100"}`}
-        >
-          Contact
-        </a>
+        {
+          navItems.map((item) => (
+            <a href={item.href} class={getNavLinkClasses(item.href)}>
+              {item.label}
+            </a>
+          ))
+        }
         <a
           href="/donate"
           class="px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-600 text-white rounded-lg font-semibold text-center"