diff options
Diffstat (limited to '')
| -rw-r--r-- | app/package.json | 1 | ||||
| -rw-r--r-- | app/src/lib/svelte/Navigation.svelte | 30 | ||||
| -rw-r--r-- | app/src/routes/+layout.svelte | 9 |
3 files changed, 31 insertions, 9 deletions
diff --git a/app/package.json b/app/package.json index bf29956..a0bb1a0 100644 --- a/app/package.json +++ b/app/package.json @@ -5,6 +5,7 @@ "@floating-ui/dom": "1.5.3" }, "devDependencies": { + "@iconify/icons-carbon": "1.2.20", "@iconify/svelte": "3.1.4", "@skeletonlabs/skeleton": "2.2.0", "@skeletonlabs/tw-plugin": "0.2.1", 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> |