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>