diff options
| author | Matt Strapp <matt@mattstrapp.net> | 2023-10-20 14:08:54 -0500 |
|---|---|---|
| committer | Matt Strapp <matt@mattstrapp.net> | 2023-10-20 14:08:54 -0500 |
| commit | 85b69ea89fbd08c3019f32b57a284337b6555cad (patch) | |
| tree | 03674ba1400b42d0ce3bde4f6a058503d8a5647b /app/src/lib/components/Navigation.svelte | |
| parent | Bump svelte from 4.2.1 to 4.2.2 (diff) | |
| download | trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar.gz trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar.bz2 trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar.lz trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar.xz trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar.zst trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.zip | |
uh
Signed-off-by: Matt Strapp <matt@mattstrapp.net>
Diffstat (limited to 'app/src/lib/components/Navigation.svelte')
| -rw-r--r-- | app/src/lib/components/Navigation.svelte | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/app/src/lib/components/Navigation.svelte b/app/src/lib/components/Navigation.svelte new file mode 100644 index 0000000..2e5ba98 --- /dev/null +++ b/app/src/lib/components/Navigation.svelte @@ -0,0 +1,70 @@ +<script lang="ts"> + import { page } from '$app/stores' + + import Icon from '@iconify/svelte' + import homeIcon from '@iconify/icons-carbon/home' + import logoGithub from '@iconify/icons-carbon/logo-github' + import menuIcon from '@iconify/icons-carbon/menu' + import pageBreak from '@iconify/icons-carbon/page-break' + + import { AppRail, AppRailAnchor, getDrawerStore } from '@skeletonlabs/skeleton' + + const drawerStore = getDrawerStore() + + function drawerClose(): void { + drawerStore.close() + } + + /** + * If the menu prop is true, then the close menu button will be rendered. + */ + export let menu = false +</script> + +<AppRail> + <svelte:fragment slot="lead"> + {#if menu} + <AppRailAnchor on:click={drawerClose} title="Close Menu" value={0} href="javascript:;"> + <svelte:fragment slot="lead"> + <Icon icon={menuIcon} width="25" /> + </svelte:fragment> + Close Menu + </AppRailAnchor> + {/if} + </svelte:fragment> + <AppRailAnchor + href="/" + selected={$page.url.pathname === '/'} + on:click={drawerClose} + title="Homepage" + > + <svelte:fragment slot="lead"> + <Icon icon={homeIcon} width="35" /> + </svelte:fragment> + Home! + </AppRailAnchor> + <AppRailAnchor + href="/truncate" + selected={$page.url.pathname === '/truncate'} + on:click={drawerClose} + title="Truncate Files" + > + <svelte:fragment slot="lead"> + <Icon icon={pageBreak} width="35" /> + </svelte:fragment> + Truncate! + </AppRailAnchor> + <svelte:fragment slot="trail"> + <AppRailAnchor + href="https://github.com/rosstheross/rosstheross.github.io" + rel="noreferrer" + on:click={drawerClose} + title="Source Code" + > + <svelte:fragment slot="lead"> + <Icon icon={logoGithub} width="35" /> + </svelte:fragment> + Source! + </AppRailAnchor> + </svelte:fragment> +</AppRail> |