aboutsummaryrefslogtreecommitdiffstats
path: root/app/src
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--app/src/lib/svelte/Navigation.svelte30
-rw-r--r--app/src/routes/+layout.svelte9
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>