Make the website less ugly, especially on mobile

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

3 files changed, 74 insertions, 18 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!');
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 6ad0d22..519a11d 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -2,11 +2,19 @@
   import { useRegisterSW } from 'virtual:pwa-register/svelte';
   import { pwaInfo } from 'virtual:pwa-info';
   import { onMount } from 'svelte';
+  import {
+    AppShell,
+    AppBar,
+    getDrawerStore,
+    getToastStore,
+    initializeStores,
+    Toast,
+    Drawer
+  } from '@skeletonlabs/skeleton';
 
-  import '../app.postcss';
-  import { AppShell, AppBar, getToastStore, initializeStores, Toast } from '@skeletonlabs/skeleton';
   import Navigation from '$lib/svelte/Navigation.svelte';
 
+  import '../app.postcss';
   // Floating UI for Popups
   // import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
   // import { storePopup } from '@skeletonlabs/skeleton';
@@ -14,8 +22,15 @@
 
   initializeStores();
 
+  const drawerStore = getDrawerStore();
   const toastStore = getToastStore();
 
+  function drawerOpen() {
+    drawerStore.open({
+      width: 'w-[80px]'
+    });
+  }
+
   onMount(async () => {
     if (pwaInfo) {
       useRegisterSW({
@@ -46,25 +61,30 @@
   {@html webManifestLink}
 </svelte:head>
 
+<Drawer>
+  <Navigation />
+</Drawer>
+
 <Toast position="br" />
 
 <!-- App Shell -->
-<AppShell>
+<AppShell slotSidebarLeft="w-0 lg:w-64">
   <svelte:fragment slot="header">
     <!-- App Bar -->
     <AppBar>
       <svelte:fragment slot="lead">
+        <div class="flex items-center">
+          <button class="lg:hidden btn btn-sm mr-4" on:click={drawerOpen}>
+            <span>
+              <svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
+                <rect width="100" height="20" />
+                <rect y="30" width="100" height="20" />
+                <rect y="60" width="100" height="20" />
+              </svg>
+            </span>
+          </button>
           <strong class="text-xl uppercase">A!</strong>
-      </svelte:fragment>
-      <svelte:fragment slot="trail">
-        <a
-          class="btn btn-sm variant-ghost-surface"
-          href="https://github.com/rosstheross/rosstheross.github.io"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Frontend Source
-        </a>
+        </div>
       </svelte:fragment>
     </AppBar>
   </svelte:fragment>