From e430645e4a637148bcf6d5846a84fe97f85bc0a9 Mon Sep 17 00:00:00 2001
From: Matt Strapp <matt@mattstrapp.net>
Date: Thu, 28 Sep 2023 09:49:16 -0500
Subject: Make the website less ugly, especially on mobile

Signed-off-by: Matt Strapp <matt@mattstrapp.net>
---
 app/src/lib/svelte/Navigation.svelte | 42 ++++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

(limited to 'app/src/lib/svelte')

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>
-- 
cgit v1.2.3