Make the website less ugly, especially on mobile

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

5 files changed, 91 insertions, 18 deletions

diff --git a/app/package.json b/app/package.json
index 2905c41..217907e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -5,6 +5,7 @@
     "@floating-ui/dom": "1.5.2"
   },
   "devDependencies": {
+    "@iconify/svelte": "^3.1.4",
     "@skeletonlabs/skeleton": "2.1.0",
     "@skeletonlabs/tw-plugin": "0.2.0",
     "@sveltejs/adapter-auto": "^2.1.0",
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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 43251d9..4ef157f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,9 @@ importers:
         specifier: 1.5.2
         version: 1.5.2
     devDependencies:
+      '@iconify/svelte':
+        specifier: ^3.1.4
+        version: 3.1.4(svelte@4.2.1)
       '@skeletonlabs/skeleton':
         specifier: 2.1.0
         version: 2.1.0(svelte@4.2.1)
@@ -1603,6 +1606,19 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify/svelte@3.1.4(svelte@4.2.1):
+    resolution: {integrity: sha512-YDwQlN46ka8KPRayDb7TivmkAPizfTXi6BSRNqa1IV0+byA907n8JcgQafA7FD//pW5XCuuAhVx6uRbKTo+CfA==}
+    peerDependencies:
+      svelte: '*'
+    dependencies:
+      '@iconify/types': 2.0.0
+      svelte: 4.2.1
+    dev: true
+
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: true
+
   /@jridgewell/gen-mapping@0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}