src/routes/+layout.svelte

@@ -38,16 +38,39 @@
 	];
 
 	let showMenuPermanent = false;
+	let menuButtonScrollIndex: number | null = null;
+	function onMenuButtonScroll(e: WheelEvent) {
+		if (menuButtonScrollIndex == null) {
+			if (e.deltaY < 0) {
+				menuButtonScrollIndex = navPaths.length - 1;
+			} else if (e.deltaY > 0) {
+				menuButtonScrollIndex = 0;
+			} else {
+				menuButtonScrollIndex = navPaths.length - 1;
+			}
+		} else {
+			navPaths[menuButtonScrollIndex].active = false;
+
+			if (e.deltaY > 0) {
+				menuButtonScrollIndex++;
+			} else if (e.deltaY < 0) {
+				menuButtonScrollIndex--;
+			}
+
+			if (menuButtonScrollIndex > navPaths.length - 1) {
+				menuButtonScrollIndex = 0;
+			} else if (menuButtonScrollIndex < 0) {
+				menuButtonScrollIndex = navPaths.length - 1;
+			}
+		}
+
+		navPaths[menuButtonScrollIndex].active = true;
+	}
 
 	let onAdminPage = false;
 	$: onAdminPage =
 		$page.url.pathname.startsWith(`${env.PUBLIC_BASE_PATH}/admin`) &&
 		$page.url.pathname !== `${env.PUBLIC_BASE_PATH}/admin/login`;
-	$: {
-		for (let i = 0; i < navPaths.length; i++) {
-			navPaths[i].active = navPaths[i].href === $page.url.pathname;
-		}
-	}
 
 	let isTouch = false;
 	let nav: HTMLDivElement;
@@ -97,6 +120,13 @@
 				isTouch = true;
 				showMenuPermanent = !showMenuPermanent;
 			}}
+			on:mouseleave={() => {
+				if (menuButtonScrollIndex !== null) {
+					navPaths[menuButtonScrollIndex].active = false;
+				}
+				menuButtonScrollIndex = null;
+			}}
+			on:wheel|preventDefault={onMenuButtonScroll}
 		>
 			<img
 				class="absolute w-full h-full p-1 pixelated"