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>

src/lib/data/NavLinks.ts

@@ -0,0 +1,41 @@
+import type { NavLink } from '$types';
+
+export const navLinks: NavLink[] = [
+  {
+    content: {
+      text: 'Home'
+    },
+    target: {
+      href: '/',
+      newTab: false
+    }
+  },
+  {
+    content: {
+      text: 'Call-Tauri'
+    },
+    target: {
+      href: '/call-tauri',
+      newTab: false
+    }
+  },
+  {
+    content: {
+      text: 'Hash-string'
+    },
+    target: {
+      href: '/hash-string',
+      newTab: false
+    }
+  },
+
+  {
+    content: {
+      text: 'Versions'
+    },
+    target: {
+      href: '/versions',
+      newTab: false
+    }
+  }
+];

src/lib/router/Router.svelte

@@ -7,7 +7,8 @@
   import Versions from '$router/routes/Versions.svelte';
 </script>
 
-<!-- The routes give off an error: Here is a fix -> https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661 -->
+<!-- Fix for linting errors: ->
+   https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661 -->
 <Route path="/"><Index /></Route>
 <Route path="/call-tauri"><CallTauri /></Route>
 <Route path="/hash-string"><HashString /></Route>

src/types.ts

@@ -1,3 +1,16 @@
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+
 export const themes = ['dark', 'light'] as const;
 
 export type Theme = typeof themes[number];
+
+export type NavLink = {
+  target: {
+    href: string;
+    newTab?: boolean;
+  };
+  content: {
+    text?: string;
+    icon?: IconDefinition;
+  };
+};