new sounds

frontend/src/routes/+layout.svelte

@@ -64,6 +64,12 @@
 		recentItems = [item, ...recentItems];
 	}
 
+	function playClickSound() {
+		const audio = new Audio("/clickpagesound.mp3");
+		audio.volume = 0.4;
+		audio.play().catch((e) => console.error("Error playing sound:", e));
+	}
+
 	const navLinks = [
 		{ name: "Home", route: "/", icon: "ri:home-4-line" },
 		{ name: "Goal", route: "/goal", icon: "ri:flag-2-line" },
@@ -114,12 +120,17 @@
 						href={link.route}
 						class="nav-link"
 						class:active={$page.route.id === link.route}
+						onclick={playClickSound}
 					>
 						<Icon icon={link.icon} width="20" />
 						<span>{link.name}</span>
 					</a>
 				{/each}
-				<a href="/catalogue" class="catalogue-button">
+				<a
+					href="/catalogue"
+					class="catalogue-button"
+					onclick={playClickSound}
+				>
 					<Icon icon="ri:search-line" width="20" />
 					<span>Browse Catalogue</span>
 				</a>