From 234b05864cea0822d37e08da9fb107e112e58aaa Mon Sep 17 00:00:00 2001
From: Fractal-Tess <vgfractal@gmail.com>
Date: Mon, 7 Nov 2022 13:52:24 +0200
Subject: [PATCH] links update

---
 src/lib/components/header/Header.svelte     |  6 +--
 src/lib/components/nav/HeaderNav.svelte     | 26 -------------
 src/lib/components/nav/HorizontalNav.svelte | 28 ++++++++++++++
 src/lib/data/NavLinks.ts                    | 41 +++++++++++++++++++++
 src/lib/router/Router.svelte                |  3 +-
 src/types.ts                                | 13 +++++++
 6 files changed, 87 insertions(+), 30 deletions(-)
 delete mode 100644 src/lib/components/nav/HeaderNav.svelte
 create mode 100644 src/lib/components/nav/HorizontalNav.svelte
 create mode 100644 src/lib/data/NavLinks.ts

diff --git a/src/lib/components/header/Header.svelte b/src/lib/components/header/Header.svelte
index 57e244a..4464dd7 100644
--- a/src/lib/components/header/Header.svelte
+++ b/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"
diff --git a/src/lib/components/nav/HeaderNav.svelte b/src/lib/components/nav/HeaderNav.svelte
deleted file mode 100644
index cda22b9..0000000
--- a/src/lib/components/nav/HeaderNav.svelte
+++ /dev/null
@@ -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>
diff --git a/src/lib/components/nav/HorizontalNav.svelte b/src/lib/components/nav/HorizontalNav.svelte
new file mode 100644
index 0000000..c4c2a63
--- /dev/null
+++ b/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>
diff --git a/src/lib/data/NavLinks.ts b/src/lib/data/NavLinks.ts
new file mode 100644
index 0000000..53135e9
--- /dev/null
+++ b/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
+    }
+  }
+];
diff --git a/src/lib/router/Router.svelte b/src/lib/router/Router.svelte
index faed0f2..ea68882 100644
--- a/src/lib/router/Router.svelte
+++ b/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>
diff --git a/src/types.ts b/src/types.ts
index 77aa4c1..d090b25 100644
--- a/src/types.ts
+++ b/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;
+  };
+};