mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-04-27 01:21:22 +00:00
47 lines
1.2 KiB
Svelte
47 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import '../theme.postcss';
|
|
import '@skeletonlabs/skeleton/styles/skeleton.css';
|
|
import '../app.postcss';
|
|
import { AppShell, Drawer, ProgressBar, drawerStore } from '@skeletonlabs/skeleton';
|
|
import Footer from '../lib/components/Footer.svelte';
|
|
import Navigation from '../lib/components/Navigation.svelte';
|
|
import Header from '$lib/components/Header.svelte';
|
|
|
|
let routes = [
|
|
{ url: '/', label: 'Home' },
|
|
{ url: '/projects', label: 'Projects' },
|
|
{ url: '/tools', label: 'Tools' },
|
|
{ url: '/blog', label: 'Blog' }
|
|
];
|
|
|
|
let progress = 0;
|
|
|
|
function handleScroll(event: Event) {
|
|
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement;
|
|
progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
|
|
}
|
|
</script>
|
|
|
|
<Drawer width="w-[280px] md:w-[480px]">
|
|
<Navigation {routes} />
|
|
</Drawer>
|
|
|
|
<AppShell
|
|
slotSidebarLeft="w-0 md:w-40"
|
|
on:scroll={handleScroll}
|
|
>
|
|
<svelte:fragment slot="header">
|
|
<Header {progress} />
|
|
</svelte:fragment>
|
|
<svelte:fragment slot="sidebarLeft">
|
|
<Navigation {routes} />
|
|
</svelte:fragment>
|
|
<!-- Router Slot -->
|
|
<div class="container p-4 mx-auto">
|
|
<slot />
|
|
</div>
|
|
<!-- ---- / ---- -->
|
|
<svelte:fragment slot="pageFooter">
|
|
<Footer />
|
|
</svelte:fragment>
|
|
</AppShell>
|