diff options
Diffstat (limited to 'app/src/lib')
| -rw-r--r-- | app/src/lib/svelte/Navigation.svelte | 30 |
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> |