navbar toggle and event dispatch

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,8 +21,23 @@
 <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 id="mainMenu" class="navbar-menu" class:is-active={active}>
 		<div class="navbar-end">
 			<div class="navbar-item">
 				<div class="buttons">
@@ -34,4 +51,5 @@
 				</div>
 			</div>
 		</div>
+	</div>
 </nav>

src/routes/+layout.svelte

@@ -33,5 +33,5 @@
 	}
 </script>
 
-<NavBar />
+<NavBar on:signin={signIn} />
 <slot></slot>