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 | |
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')
-rw-r--r-- | app/src/lib/svelte/Navigation.svelte | 30 | ||||
-rw-r--r-- | app/src/routes/+layout.svelte | 9 |
2 files changed, 30 insertions, 9 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> diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte index c29de33..c866e8c 100644 --- a/app/src/routes/+layout.svelte +++ b/app/src/routes/+layout.svelte @@ -1,6 +1,7 @@ <script lang="ts"> import Navigation from '$lib/svelte/Navigation.svelte'; import Icon from '@iconify/svelte'; + import menuIcon from '@iconify/icons-carbon/menu'; import { AppBar, AppShell, @@ -62,20 +63,20 @@ </svelte:head> <Drawer> - <Navigation /> + <Navigation menu /> </Drawer> <Toast position="br" /> <!-- App Shell --> -<AppShell slotSidebarLeft="w-0 lg:w-64"> +<AppShell slotSidebarLeft="w-0 md:w-20"> <svelte:fragment slot="header"> <!-- App Bar --> <AppBar> <svelte:fragment slot="lead"> <div class="flex items-center"> - <button class="lg:hidden btn btn-sm mr-4" on:click={drawerOpen}> - <Icon icon="carbon:menu" width=25 /> + <button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}> + <Icon icon={menuIcon} width=25 /> </button> <strong class="text-xl uppercase">Nothing</strong> </div> |