added tinro router

src/App.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-
-  import Header from '$lib/components/Header.svelte';
-  import Index from '$lib/Index.svelte';
-
   import { theme } from '$lib/stores/theme';
+  import Router from '$lib/router/Router.svelte';
+  import BaseLayout from '$lib/layout/BaseLayout.svelte';
 
   $: {
     document.documentElement.setAttribute('data-theme', $theme);
@@ -13,12 +10,7 @@
 </script>
 
 {#await theme.load() then}
-  <div
-    class="font-sans bg-base-100 text-base-content h-screen flex flex-col overflow-y-auto overflow-x-hidden"
-  >
-    <Header />
-    <main class="flex-1" in:fade={{ delay: 300, duration: 1000 }}>
-      <Index />
-    </main>
-  </div>
+  <BaseLayout>
+    <Router />
+  </BaseLayout>
 {/await}

src/lib/components/buttons/ThemeToggleIcon.svelte

@@ -1,9 +1,4 @@
-<script lang="ts">
-  let _class = 'w-8';
-  export { _class as class };
-</script>
-
-<svg class={_class} aria-hidden="true" viewBox="0 0 24 24">
+<svg class="w-8" aria-hidden="true" viewBox="0 0 24 24">
   <mask class="moon" id="moon-mask">
     <rect x="0" y="0" width="100%" height="100%" fill="white" />
     <circle cx="24" cy="10" r="6" fill="black" />

src/lib/components/footer/Footer.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">
+  // Empty for now
+</script>

src/lib/components/header/Header.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import ThemeToggleIcon from '$lib/components/ThemeToggleIcon.svelte';
+  import ThemeToggleIcon from '$lib/components/buttons/ThemeToggleIcon.svelte';
   import { theme } from '$lib/stores/theme';
   import { appWindow } from '@tauri-apps/api/window';
   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';
 </script>
 
 <div
@@ -19,12 +20,15 @@
     <ThemeToggleIcon class="w-8" />
   </button>
 
+  <HeaderNav />
+
   <!-- TODO: Investigate why hovering over the icons is laggy -->
   <div class="flex [&>*]:px-2 h-full">
     <a
       target="_blank"
       href="https://github.com/Fractal-Tess/Svelte-Tauri"
       class="hover:text-secondary flex items-center"
+      rel="noreferrer"
     >
       <Fa icon={faGithub} size="lg" />
     </a>

src/lib/components/nav/HeaderNav.svelte

@@ -0,0 +1,8 @@
+<nav class="h-full">
+  <ul class="flex space-x-4 h-full items-center [&>li>a]:p-2">
+    <li><a href="/">Home</a></li>
+    <li><a href="/call-tauri">CallTauri</a></li>
+    <li><a href="/hash-string">HashString</a></li>
+    <li><a href="/versions">Versions</a></li>
+  </ul>
+</nav>

src/lib/layout/BaseLayout.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  import Header from '$lib/components/header/Header.svelte';
+  import Footer from '$lib/components/footer/Footer.svelte';
+</script>
+
+<div
+  class="font-sans bg-base-100 text-base-content h-screen flex flex-col overflow-y-auto overflow-x-hidden"
+>
+  <Header />
+  <main class="flex-1" in:fade={{ delay: 300, duration: 1000 }}>
+    <slot />
+  </main>
+  <Footer />
+</div>

src/lib/router/Router.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Route } from 'tinro';
+
+  import Index from '$lib/router/routes/Index.svelte';
+  import CallTauri from '$router/routes/CallTauri.svelte';
+  import HashString from '$router/routes/HashString.svelte';
+  import Versions from '$router/routes/Versions.svelte';
+</script>
+
+<!-- This gives a linting error: Fix -> 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>
+<Route path="/versions"><Versions /></Route>

src/lib/router/routes/Index.svelte

@@ -1,9 +1,3 @@
-<script lang="ts">
-  import CallTauri from '$lib/components/CallTauri.svelte';
-  import HashString from '$lib/components/HashString.svelte';
-  import Versions from '$lib/components/Versions.svelte';
-</script>
-
 <div class="flex flex-col space-y-6 items-center font-bold drop-shadow-ft">
   <h1 class="text-4xl mt-16">Welcome</h1>
   <h2 class="text-xl">
@@ -13,8 +7,4 @@
     -
     <span class="bg-primary text-primary-content rounded-md p-1"> Tauri</span> Template
   </h2>
-
-  <CallTauri />
-  <HashString />
-  <Versions />
 </div>

src/lib/stores/theme.ts

@@ -1,6 +1,6 @@
 import { Store } from 'tauri-plugin-store-api';
-import type { Theme } from '../../types';
 import { writable } from 'svelte/store';
+import type { Theme } from '$types';
 
 const store = new Store('.settings.dat');
 

src/types.ts

@@ -0,0 +1,3 @@
+export const themes = ['dark', 'light'] as const;
+
+export type Theme = typeof themes[number];