diff options
| author | Matt Strapp <matt@mattstrapp.net> | 2023-09-29 08:37:22 -0500 |
|---|---|---|
| committer | Matt Strapp <matt@mattstrapp.net> | 2023-09-29 08:40:37 -0500 |
| commit | 23dc35ec496849b7f4603c77d5f66a4d0a0fb802 (patch) | |
| tree | a20e159cdfd6ff8c707de2b51afbc91a4160e9e3 /app/src/lib/svelte | |
| parent | Pin dependencies (diff) | |
| download | trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar.gz trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar.bz2 trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar.lz trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar.xz trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar.zst trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.zip | |
Fix centering of content
Signed-off-by: Matt Strapp <matt@mattstrapp.net>
Diffstat (limited to 'app/src/lib/svelte')
| -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> |