links update

src/lib/components/header/Header.svelte

@@ -5,7 +5,8 @@
   import { faXmark, faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
   import { faGithub } from '@fortawesome/free-brands-svg-icons';
   import Fa from 'svelte-fa';
-  import HeaderNav from '$lib/components/nav/HeaderNav.svelte';
+  import HeaderNav from '$lib/components/nav/HorizontalNav.svelte';
+  import { navLinks } from '$data/NavLinks';
 </script>
 
 <div
@@ -19,9 +20,8 @@
     <ThemeToggleIcon class="w-8" />
   </button>
 
-  <HeaderNav />
+  <HeaderNav {navLinks} />
 
-  <!-- TODO: Make a report for the on hover text effect being laggy -->
   <div class="flex [&>*]:px-2 h-full  [&>*]:transition-all">
     <a
       target="_blank"

src/lib/components/nav/HeaderNav.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import { active } from 'tinro';
-</script>
-
-<nav class="h-full">
-  <ul class="flex space-x-4 h-full items-center [&>li>a]:p-2">
-    <li>
-      <a use:active exact data-active-class="border-b-2" href="/">Home</a>
-    </li>
-    <li>
-      <a use:active exact data-active-class="border-b-2" href="/call-tauri"
-        >CallTauri</a
-      >
-    </li>
-    <li>
-      <a use:active exact data-active-class="border-b-2" href="/hash-string"
-        >HashString</a
-      >
-    </li>
-    <li>
-      <a use:active exact data-active-class="border-b-2" href="/versions"
-        >Versions</a
-      >
-    </li>
-  </ul>
-</nav>

src/lib/components/nav/HorizontalNav.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { active } from 'tinro';
+  import type { NavLink } from '$types';
+  import Fa from 'svelte-fa/src/fa.svelte';
+
+  export let navLinks: NavLink[];
+</script>
+
+<nav>
+  <ul class="flex space-x-4">
+    {#each navLinks as navLink, i (i)}
+      <li>
+        <a
+          use:active
+          exact
+          data-active-class="border-b-2"
+          href={navLink.target.href}
+          target={navLink.target.newTab ? '_blank' : ''}
+        >
+          {#if navLink.content.icon}
+            <Fa icon={navLink.content.icon} />
+          {/if}
+          {navLink.content.text}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</nav>