From 8b87aefb7fb7bf2b71452b38ece7a5ad75a0f921 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Thu, 27 Jul 2023 10:25:36 +0200
Subject: [PATCH] feat: add hamburger menu navigation

---
 src/lib/components/Header.svelte          | 42 ++++++++++++++---------
 src/lib/components/Navigation.svelte      |  9 +++--
 src/lib/components/icons/Hamburger.svelte |  1 +
 src/routes/+layout.svelte                 |  8 +++--
 4 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/components/icons/Hamburger.svelte

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 3fdb022..f449258 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,19 +1,29 @@
-<script>
-	import { AppBar } from "@skeletonlabs/skeleton";
-	import GitHub from "./icons/GitHub.svelte";
+<script lang="ts">
+	import { AppBar, drawerStore } from '@skeletonlabs/skeleton';
+	import GitHub from './icons/GitHub.svelte';
+	import Hamburger from './icons/Hamburger.svelte';
+
+	function drawerOpen(): void {
+		drawerStore.open();
+	}
 </script>
 
 <AppBar>
-  <svelte:fragment slot="lead">
-    <img src="./icon.svg" alt="Logo" srcset="" class="pr-2" />
-    <code class="code">hellob.art</code>
-  </svelte:fragment>
-  <svelte:fragment slot="trail">
-    <a
-      href="https://github.com/bartvdbraak/hellob.art"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="btn-icon variant-primary"><GitHub /></a
-    >
-  </svelte:fragment>
-</AppBar>
\ No newline at end of file
+	<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" />
+		<code class="code">hellob.art</code>
+	</svelte:fragment>
+	<svelte:fragment slot="trail">
+		<a
+			href="https://github.com/bartvdbraak/hellob.art"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="btn-icon variant-primary"><GitHub /></a
+		>
+	</svelte:fragment>
+</AppBar>
diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index 27fc13a..cfb5101 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { drawerStore } from '@skeletonlabs/skeleton';
 	$: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');
 
 	export let routes: { url: string; label: string }[];
+
+	function drawerClose(): void {
+		drawerStore.close();
+	}
 </script>
 
-<nav class="list-nav m-5">
+<nav class="list-nav p-4">
 	<ul>
 		{#each routes as route}
 			<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>
 		{/each}
 	</ul>
diff --git a/src/lib/components/icons/Hamburger.svelte b/src/lib/components/icons/Hamburger.svelte
new file mode 100644
index 0000000..7bafeae
--- /dev/null
+++ b/src/lib/components/icons/Hamburger.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 15424a4..cdf3243 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,7 @@
 	import '../theme.postcss';
 	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	import '../app.postcss';
-	import { AppShell } from '@skeletonlabs/skeleton';
+	import { AppShell, Drawer, 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';
@@ -15,7 +15,11 @@
 	];
 </script>
 
-<AppShell>
+<Drawer>
+	<Navigation {routes} />
+</Drawer>
+
+<AppShell slotSidebarLeft="w-0 md:w-52">
 	<svelte:fragment slot="header">
 		<Header />
 	</svelte:fragment>