add minecraft style navigation

src/app.css

@@ -45,3 +45,13 @@
 		@apply font-minecraft;
 	}
 }
+
+@layer components {
+	.pixelated {
+		image-rendering: pixelated;
+	}
+
+	.bg-horizontal-sprite {
+		background-size: auto 100%;
+	}
+}

src/routes/+layout.svelte

@@ -1,5 +1,141 @@
 <script lang="ts">
 	import '../app.css';
+	import { env } from '$env/dynamic/public';
+
+	let navPaths = [
+		{
+			name: 'Startseite',
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-home.png`,
+			href: `${env.PUBLIC_BASE_PATH}/`,
+			active: false
+		},
+		{
+			name: 'Registrieren',
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-register.png`,
+			href: `${env.PUBLIC_BASE_PATH}/register`,
+			active: false
+		},
+		{
+			name: 'Regeln',
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-rules.png`,
+			href: `${env.PUBLIC_BASE_PATH}/rules`,
+			active: false
+		}
+	];
+
+	let showMenuPermanent = false;
+	let menuButtonScrollIndex: number | null = null;
+	function onMenuButtonScroll(e: WheelEvent) {
+		if (menuButtonScrollIndex == null) {
+			if (e.deltaY < 0) {
+				menuButtonScrollIndex = 0;
+			} else if (e.deltaY > 0) {
+				menuButtonScrollIndex = navPaths.length - 1;
+			} else {
+				menuButtonScrollIndex = 0;
+			}
+		} 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 isTouch = false;
+	let nav: HTMLDivElement;
 </script>
 
-<slot />
+<svelte:body
+	on:touchend={(e) => {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		if (isTouch && !nav.contains(e.target)) showMenuPermanent = false;
+	}}
+/>
+
+<main>
+	<slot />
+</main>
+<nav>
+	<div
+		class="fixed bottom-4 right-4 sm:right-[initial] sm:left-4 group/menu-bar flex flex-col-reverse justify-center items-center"
+		bind:this={nav}
+	>
+		<button
+			class={isTouch
+				? 'btn btn-square relative w-16 h-16'
+				: 'btn btn-square group/menu-button relative w-16 h-16'}
+			on:click={() => {
+				if (!isTouch) showMenuPermanent = !showMenuPermanent;
+			}}
+			on:touchend={() => {
+				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"
+				src="{env.PUBLIC_BASE_PATH}/img/menu-button.png"
+				alt="menu"
+			/>
+			<img
+				class="opacity-0 transition-opacity delay-50 group-hover/menu-button:opacity-100 absolute w-full h-full p-[3px] pixelated"
+				class:opacity-100={isTouch && showMenuPermanent}
+				src="{env.PUBLIC_BASE_PATH}/img/selected-frame.png"
+				alt="menu hover"
+			/>
+		</button>
+		<div
+			class:hidden={!showMenuPermanent}
+			class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'}
+		>
+			<ul class="flex flex-col bg-base-200 rounded">
+				{#each navPaths as navPath, i}
+					<li
+						class="flex justify-center tooltip tooltip-left sm:tooltip-right"
+						data-tip={navPath.name}
+					>
+						<a
+							class="btn btn-square border-none group/menu-item relative w-[3.5rem] h-[3.5rem] flex justify-center items-center"
+							href={navPath.href}
+						>
+							<div
+								style="background-image: url('{env.PUBLIC_BASE_PATH}/img/menu-inventory-bar.png'); background-position: -{i *
+									3.5}rem 0;"
+								class="block w-full h-full bg-no-repeat bg-horizontal-sprite pixelated"
+							/>
+							<div class="absolute flex justify-center items-center w-full h-full">
+								<img class="w-1/2 h-1/2 pixelated" src={navPath.sprite} alt={navPath.name} />
+							</div>
+							<img
+								class="transition-opacity delay-50 group-hover/menu-item:opacity-100 absolute w-full h-full pixelated scale-110"
+								class:opacity-0={!navPath.active}
+								src="{env.PUBLIC_BASE_PATH}/img/selected-frame.png"
+								alt="menu hover"
+							/>
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
+</nav>