aboutsummaryrefslogtreecommitdiffstats
path: root/app/src/lib/svelte/Navigation.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'app/src/lib/svelte/Navigation.svelte')
-rw-r--r--app/src/lib/svelte/Navigation.svelte30
1 files changed, 25 insertions, 5 deletions
diff --git a/app/src/lib/svelte/Navigation.svelte b/app/src/lib/svelte/Navigation.svelte
index 724f821..9246c28 100644
--- a/app/src/lib/svelte/Navigation.svelte
+++ b/app/src/lib/svelte/Navigation.svelte
@@ -1,6 +1,12 @@
<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();
@@ -8,13 +14,25 @@
function drawerClose(): void {
drawerStore.close();
}
+
+ // Hamburgers
+ export let menu = false;
</script>
<AppRail>
- <svelte:fragment slot="lead"></svelte:fragment>
- <AppRailAnchor href="/" selected={$page.url.pathname === '/'} on:click={drawerClose}>
+ <svelte:fragment slot="lead">
+ {#if menu}
+ <AppRailAnchor on:click={drawerClose} title="Close Menu" value={0}>
+ <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="Home">
<svelte:fragment slot="lead">
- <Icon icon="carbon:home" width="35" />
+ <Icon icon={homeIcon} width="35" />
</svelte:fragment>
Home!
</AppRailAnchor>
@@ -22,9 +40,10 @@
href="/truncate"
selected={$page.url.pathname === '/truncate'}
on:click={drawerClose}
+ title="Truncate"
>
<svelte:fragment slot="lead">
- <Icon icon="carbon:page-break" width="35" />
+ <Icon icon={pageBreak} width="35" />
</svelte:fragment>
Truncate!
</AppRailAnchor>
@@ -33,9 +52,10 @@
href="https://github.com/rosstheross/rosstheross.github.io"
rel="noreferrer"
on:click={drawerClose}
+ title=""
>
<svelte:fragment slot="lead">
- <Icon icon="carbon:logo-github" width="35" />
+ <Icon icon={logoGithub} width="35" />
</svelte:fragment>
Source!
</AppRailAnchor>