aboutsummaryrefslogtreecommitdiffstats
path: root/app/src/lib/svelte
diff options
context:
space:
mode:
authorMatt Strapp <matt@mattstrapp.net>2023-09-28 09:49:16 -0500
committerMatt Strapp <matt@mattstrapp.net>2023-09-28 09:49:16 -0500
commite430645e4a637148bcf6d5846a84fe97f85bc0a9 (patch)
treea7c49f980a4f7e8fd52c4b5622bce601c9a45ab2 /app/src/lib/svelte
parentLint (diff)
downloadtrinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar.gz
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar.bz2
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar.lz
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar.xz
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar.zst
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.zip
Make the website less ugly, especially on mobile
Signed-off-by: Matt Strapp <matt@mattstrapp.net>
Diffstat (limited to 'app/src/lib/svelte')
-rw-r--r--app/src/lib/svelte/Navigation.svelte42
1 files changed, 38 insertions, 4 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>