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,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>

src/routes/+layout.svelte

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