feat: update PokeNav, if current page use a span element

Author: Indyandie

src/components/PokeNav.astro

@@ -1,30 +1,34 @@
 ---
 const baseUrl = import.meta.env.BASE_URL
+const thisUrl = Astro.url.pathname
 const about = baseUrl + 'about/'
 const v2 = baseUrl + 'v2/'
 const graphql = baseUrl + 'graphql/'
 ---
+
 <nav>
   <ul
     class="
       flex gap-6
       text-(--sl-color-white) pr-4
-      [&_li]:hover:text-(--sl-color-accent-high)
-      [&_li]:hover:font-bold
-      [&_li]:hover:underline
+      [&_a]:hover:text-(--sl-color-accent-high)
+      [&_a]:hover:font-bold
+      [&_a]:hover:underline
+      [&_a]:font-semibold
+      [&_span]:opacity-50
     "
   >
     <li>
-      <a href={baseUrl}>Home</a>
+      {thisUrl !== baseUrl ? <a href={baseUrl}>Home </a> : <span>Home</span>}
     </li>
     <li>
-      <a href={about}>About</a>
+      {thisUrl !== about ? <a href={about}>About</a> : <span>About</span>}
     </li>
     <li>
-      <a href={v2}>API v2</a>
+      {thisUrl !== v2 ? <a href={v2}>API v2</a> : <span>API v2</span>}
     </li>
     <li>
-      <a href={graphql}>GraphQL v1Beta</a>
+      {thisUrl !== graphql ? <a href={graphql}>GraphQL v1Beta</a> : <span>GraphQL v1Beta</span>}
     </li>
   </ul>
 </nav>