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 | |
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')
-rw-r--r-- | app/src/lib/components/Navigation.svelte | 70 | ||||
-rw-r--r-- | app/src/lib/components/ReloadPrompt.svelte | 32 |
2 files changed, 102 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> diff --git a/app/src/lib/components/ReloadPrompt.svelte b/app/src/lib/components/ReloadPrompt.svelte new file mode 100644 index 0000000..e6effbb --- /dev/null +++ b/app/src/lib/components/ReloadPrompt.svelte @@ -0,0 +1,32 @@ +<script lang="ts"> + import { getToastStore } from '@skeletonlabs/skeleton' + import { useRegisterSW } from 'virtual:pwa-register/svelte' + + const toastStore = getToastStore() + + const { updateServiceWorker } = useRegisterSW({ + onRegisteredSW(r) { + console.log('SW Registered: ', r) + }, + onNeedRefresh() { + toastStore.trigger({ + message: 'A new version of the application is available.', + autohide: false, + action: { + label: 'Refresh', + response: updateServiceWorker, + }, + }) + }, + onOfflineReady() { + toastStore.trigger({ + background: 'variant-filled-success', + message: 'Now ready for offline use!', + timeout: 5000, + }) + }, + onRegisterError(err) { + console.error('SW Registration Error: ', err) + }, + }) +</script> |