From b5612876be142b60804e3674d628a8a39c1d2a6a Mon Sep 17 00:00:00 2001
From: nate <nate@nateflateau.com>
Date: Sun, 16 Jun 2024 07:19:41 -0400
Subject: [PATCH] navbar toggle and event dispatch

---
 src/lib/components/NavBar.svelte | 40 +++++++++++++++++++++++---------
 src/routes/+layout.svelte        |  2 +-
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 1e4ff50..2d9112c 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -5,6 +5,8 @@
 
 	const dispatch = createEventDispatcher();
 
+	let active = false;
+
 	let avatarimage: string | undefined;
 	$: {
 		avatarimage = $ndk.activeUser?.profile?.image;
@@ -19,18 +21,34 @@
 <nav class="navbar" aria-label="main navigation">
 	<div class="navbar-brand">
 		<h1 class="title is-1">CoFabricate</h1>
+		<!-- svelte-ignore a11y-missing-attribute -->
+		<a
+			role="button"
+			class="navbar-burger"
+			class:is-active={active}
+			aria-label="menu"
+			aria-expanded="false"
+			data-target="mainMenu"
+			on:click={() => (active = !active)}
+		>
+			<span aria-hidden="true"></span>
+			<span aria-hidden="true"></span>
+			<span aria-hidden="true"></span>
+			<span aria-hidden="true"></span>
+		</a>
 	</div>
-	<div class="navbar-menu"></div>
-	<div class="navbar-end">
-		<div class="navbar-item">
-			<div class="buttons">
-				<a class="button" href="/">Home</a>
-				<a class="button" href="/about">About</a>
-				{#if $ndk.activeUser}
-					<Avatar userProfile={$ndk.activeUser.profile} />
-				{:else}
-					<button class="button" on:click={signIn}>Sign In</button>
-				{/if}
+	<div id="mainMenu" class="navbar-menu" class:is-active={active}>
+		<div class="navbar-end">
+			<div class="navbar-item">
+				<div class="buttons">
+					<a class="button" href="/">Home</a>
+					<a class="button" href="/about">About</a>
+					{#if $ndk.activeUser}
+						<Avatar userProfile={$ndk.activeUser.profile} />
+					{:else}
+						<button class="button" on:click={signIn}>Sign In</button>
+					{/if}
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4d18186..8e6de00 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -33,5 +33,5 @@
 	}
 </script>
 
-<NavBar />
+<NavBar on:signin={signIn} />
 <slot></slot>