add easter egg and settings menu

src/routes/+layout.svelte

@@ -2,6 +2,8 @@
 	import '../app.css';
 	import { env } from '$env/dynamic/public';
 	import { goto } from '$app/navigation';
+	import Settings from './Settings.svelte';
+	import { playAudio } from '$lib/stores';
 
 	let navPaths = [
 		{
@@ -56,9 +58,20 @@
 
 	let isTouch = false;
 	let nav: HTMLDivElement;
+	let settings: HTMLDialogElement;
 </script>
 
 <svelte:body
+	on:keyup={(e) => {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			if (settings.open) {
+				settings.close();
+			} else {
+				settings.show();
+			}
+		}
+	}}
 	on:touchend={(e) => {
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
@@ -83,9 +96,12 @@
 					let activePath = navPaths.find((path) => path.active);
 					if (activePath !== undefined) {
 						goto(activePath.href);
-					} else {
-						showMenuPermanent = !showMenuPermanent;
+					} else if ($playAudio) {
+						new Audio(
+							`${env.PUBLIC_BASE_PATH}/aud/chest-${showMenuPermanent ? 'close' : 'open'}.mp3`
+						).play();
 					}
+					showMenuPermanent = !showMenuPermanent;
 				}
 			}}
 			on:touchend={() => {
@@ -147,3 +163,13 @@
 		</div>
 	</div>
 </nav>
+
+<dialog class="modal" bind:this={settings}>
+	<form method="dialog" class="modal-box" style="overflow: unset">
+		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+		<Settings />
+	</form>
+	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
+		<button>close</button>
+	</form>
+</dialog>