Make the website less ugly, especially on mobile

Signed-off-by: Matt Strapp <matt@mattstrapp.net>

2 files changed, 41 insertions, 5 deletions

diff --git a/app/src/lib/svelte/Navigation.svelte b/app/src/lib/svelte/Navigation.svelte
index fd3c914..973924a 100644
--- a/app/src/lib/svelte/Navigation.svelte
+++ b/app/src/lib/svelte/Navigation.svelte
@@ -1,11 +1,45 @@
 <script lang="ts">
-  import { AppRail, AppRailAnchor } from '@skeletonlabs/skeleton';
+  import Icon from '@iconify/svelte';
+  import { AppRail, AppRailAnchor, getDrawerStore } from '@skeletonlabs/skeleton';
   import { page } from '$app/stores';
+
+  const drawerStore = getDrawerStore();
+
+  function drawerClose(): void {
+    drawerStore.close();
+  }
 </script>
 
-<AppRail>
+<AppRail data-sveltekit-reload>
   <svelte:fragment slot="lead">
-    <AppRailAnchor href="/" selected={$page.url.pathname === '/'}>Home!</AppRailAnchor>
+    <AppRailAnchor href="/" selected={$page.url.pathname === '/'} on:click={drawerClose}>
+      <svelte:fragment slot="lead">
+        <Icon icon="carbon:home" width="35" />
+      </svelte:fragment>
+      Home!
+    </AppRailAnchor>
+  </svelte:fragment>
+  <AppRailAnchor
+    href="/truncate"
+    selected={$page.url.pathname === '/truncate'}
+    data-sveltekit-reload
+    on:click={drawerClose}
+  >
+    <svelte:fragment slot="lead">
+      <Icon icon="carbon:page-break" width="35" />
+    </svelte:fragment>
+    Truncate!
+  </AppRailAnchor>
+  <svelte:fragment slot="trail">
+    <AppRailAnchor
+      href="https://github.com/rosstheross/rosstheross.github.io"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <svelte:fragment slot="lead">
+        <Icon icon="carbon:logo-github" width="35" />
+      </svelte:fragment>
+      Source
+    </AppRailAnchor>
   </svelte:fragment>
-	<AppRailAnchor href="/truncate" selected={$page.url.pathname === '/truncate'}>Truncate!</AppRailAnchor>
 </AppRail>
diff --git a/app/src/lib/ts/truncate.worker.ts b/app/src/lib/ts/truncate.worker.ts
index ad00011..eaa65fe 100644
--- a/app/src/lib/ts/truncate.worker.ts
+++ b/app/src/lib/ts/truncate.worker.ts
@@ -1,9 +1,11 @@
 import type { TruncateRequest, TruncateResponse } from '../types/truncate-worker';
 
 onmessage = async (message: MessageEvent<TruncateRequest>) => {
+  console.log('File received. Truncating...');
   const file = message.data.file;
   const buffer = await file.arrayBuffer();
   const truncated = buffer.slice(0, message.data.size);
-
   postMessage({ file: truncated } as TruncateResponse);
 };
+
+console.log('Worker successfully loaded!');