diff options
| author | Matt Strapp <matt@mattstrapp.net> | 2023-09-28 09:49:16 -0500 |
|---|---|---|
| committer | Matt Strapp <matt@mattstrapp.net> | 2023-09-28 09:49:16 -0500 |
| commit | e430645e4a637148bcf6d5846a84fe97f85bc0a9 (patch) | |
| tree | a7c49f980a4f7e8fd52c4b5622bce601c9a45ab2 /app/src/lib/svelte/Navigation.svelte | |
| parent | Lint (diff) | |
| download | trinkets-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/Navigation.svelte')
| -rw-r--r-- | app/src/lib/svelte/Navigation.svelte | 42 |
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> |