aboutsummaryrefslogtreecommitdiffstats
path: root/app/src/routes
diff options
context:
space:
mode:
Diffstat (limited to 'app/src/routes')
-rw-r--r--app/src/routes/+layout.svelte46
1 files changed, 33 insertions, 13 deletions
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 6ad0d22..519a11d 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -2,11 +2,19 @@
import { useRegisterSW } from 'virtual:pwa-register/svelte';
import { pwaInfo } from 'virtual:pwa-info';
import { onMount } from 'svelte';
+ import {
+ AppShell,
+ AppBar,
+ getDrawerStore,
+ getToastStore,
+ initializeStores,
+ Toast,
+ Drawer
+ } from '@skeletonlabs/skeleton';
- import '../app.postcss';
- import { AppShell, AppBar, getToastStore, initializeStores, Toast } from '@skeletonlabs/skeleton';
import Navigation from '$lib/svelte/Navigation.svelte';
+ import '../app.postcss';
// Floating UI for Popups
// import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
// import { storePopup } from '@skeletonlabs/skeleton';
@@ -14,8 +22,15 @@
initializeStores();
+ const drawerStore = getDrawerStore();
const toastStore = getToastStore();
+ function drawerOpen() {
+ drawerStore.open({
+ width: 'w-[80px]'
+ });
+ }
+
onMount(async () => {
if (pwaInfo) {
useRegisterSW({
@@ -46,25 +61,30 @@
{@html webManifestLink}
</svelte:head>
+<Drawer>
+ <Navigation />
+</Drawer>
+
<Toast position="br" />
<!-- App Shell -->
-<AppShell>
+<AppShell slotSidebarLeft="w-0 lg:w-64">
<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}>
+ <span>
+ <svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
+ <rect width="100" height="20" />
+ <rect y="30" width="100" height="20" />
+ <rect y="60" width="100" height="20" />
+ </svg>
+ </span>
+ </button>
<strong class="text-xl uppercase">A!</strong>
- </svelte:fragment>
- <svelte:fragment slot="trail">
- <a
- class="btn btn-sm variant-ghost-surface"
- href="https://github.com/rosstheross/rosstheross.github.io"
- target="_blank"
- rel="noreferrer"
- >
- Frontend Source
- </a>
+ </div>
</svelte:fragment>
</AppBar>
</svelte:fragment>