refactor navbar code

src/components/Navbar.astro

@@ -1,9 +1,13 @@
 ---
-interface Props {
-  links: { href: string; text: string }[];
-}
+const links = [
+  { href: '/', text: 'Home' },
+  { href: '/blog', text: 'Blog' },
+  { href: '/portafolio', text: 'Portafolio' },
+  { href: '/curriculum', text: 'Curriculum' },
+  { href: '/contact', text: 'Contact' },
+];
 
-const { links } = Astro.props;
+// TODO: Fix so the "active" class can come from the server so it doesnt flicker
 ---
 
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
@@ -11,14 +15,7 @@ const { links } = Astro.props;
     {
       links.map((link) => (
         <li class="nav-item">
-          {/* TODO: active logic doesnt work in prod because is compiled --> */}
-          <a
-            class:list={[
-              'nav-link',
-              { active: Astro.url.pathname === link.href },
-            ]}
-            href={link.href}
-          >
+          <a class="nav-link" href={link.href}>
             {link.text}
           </a>
         </li>
@@ -27,6 +24,16 @@ const { links } = Astro.props;
   </ul>
 </nav>
 
+<script>
+  // Add active class to the current link
+ const link = document.querySelector(`a[href='${location.pathname}']`);
+
+ if (link) {
+   link.classList.add("active");
+ }
+
+</script>
+
 <style>
   nav {
     width: fit-content;
@@ -37,6 +44,23 @@ const { links } = Astro.props;
   }
 
   a {
+    --boder-color: transparent;
+    color: var(--prj-link-text);
+    border: 1px solid var(--boder-color);
+    border-radius: 4px;
     text-decoration: none;
+
+    transition: background-color 200ms, color 200ms;
+  }
+
+  a.active {
+    border: 1px solid var(--prj-accent-bg);
+  }
+
+  a:hover {
+    --border-color: var(--prj-accent-bg);
+    background-color: var(--prj-accent-bg);
+    color: var(--prj-accent-text);
+    border: 1px solid var(--border-color);
   }
 </style>