bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-27 09:31:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add hamburger menu navigation

Browse source
This commit is contained in:
Bart van der Braak 2023-07-27 10:25:36 +02:00
parent 3fbf85db06
commit 8b87aefb7f
4 changed files with 40 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/lib/components/Header.svelte
View file

@ -1,10 +1,20 @@
<script> <script lang="ts">
import { AppBar } from "@skeletonlabs/skeleton"; import { AppBar, drawerStore } from '@skeletonlabs/skeleton';
import GitHub from "./icons/GitHub.svelte"; import GitHub from './icons/GitHub.svelte';
import Hamburger from './icons/Hamburger.svelte';
function drawerOpen(): void {
drawerStore.open();
}
</script> </script>
<AppBar> <AppBar>
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
<button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
<span>
<Hamburger />
</span>
</button>
<img src="./icon.svg" alt="Logo" srcset="" class="pr-2" /> <img src="./icon.svg" alt="Logo" srcset="" class="pr-2" />
<code class="code">hellob.art</code> <code class="code">hellob.art</code>
</svelte:fragment> </svelte:fragment>

9
src/lib/components/Navigation.svelte
View file

@ -1,15 +1,20 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores'; import { page } from '$app/stores';
import { drawerStore } from '@skeletonlabs/skeleton';
$: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : ''); $: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');
export let routes: { url: string; label: string }[]; export let routes: { url: string; label: string }[];
function drawerClose(): void {
drawerStore.close();
}
</script> </script>
<nav class="list-nav m-5"> <nav class="list-nav p-4">
<ul> <ul>
{#each routes as route} {#each routes as route}
<li> <li>
<a class="{classesActive(route.url)}" href={route.url}>{route.label}</a> <a class="{classesActive(route.url)}" href={route.url} on:click={drawerClose}>{route.label}</a>
</li> </li>
{/each} {/each}
</ul> </ul>

1
src/lib/components/icons/Hamburger.svelte Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 326 B

8
src/routes/+layout.svelte
View file

@ -2,7 +2,7 @@
import '../theme.postcss'; import '../theme.postcss';
import '@skeletonlabs/skeleton/styles/skeleton.css'; import '@skeletonlabs/skeleton/styles/skeleton.css';
import '../app.postcss'; import '../app.postcss';
import { AppShell } from '@skeletonlabs/skeleton'; import { AppShell, Drawer, drawerStore } from '@skeletonlabs/skeleton';
import Footer from '../lib/components/Footer.svelte'; import Footer from '../lib/components/Footer.svelte';
import Navigation from '../lib/components/Navigation.svelte'; import Navigation from '../lib/components/Navigation.svelte';
import Header from '$lib/components/Header.svelte'; import Header from '$lib/components/Header.svelte';
@ -15,7 +15,11 @@
]; ];
</script> </script>
<AppShell> <Drawer>
<Navigation {routes} />
</Drawer>
<AppShell slotSidebarLeft="w-0 md:w-52">
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<Header /> <Header />
</svelte:fragment> </svelte:fragment>