<script lang="ts"> import '../app.css'; import { env } from '$env/dynamic/public'; import { goto } from '$app/navigation'; import { page } from '$app/stores'; 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 }, { name: 'FAQ', sprite: `${env.PUBLIC_BASE_PATH}/img/menu-faq.png`, href: `${env.PUBLIC_BASE_PATH}/faq`, active: false }, { name: 'Feedback & Kontakt', sprite: `${env.PUBLIC_BASE_PATH}/img/menu-feedback.png`, href: `${env.PUBLIC_BASE_PATH}/feedback`, active: false }, { name: 'Team', sprite: `${env.PUBLIC_BASE_PATH}/img/menu-team.png`, href: `${env.PUBLIC_BASE_PATH}/team`, active: false } ]; let showMenuPermanent = false; 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; </script> <svelte:body on:touchend={(e) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore if (isTouch && !nav.contains(e.target)) showMenuPermanent = false; }} /> <svelte:head> {#if !onAdminPage} <meta property="og:url" content={$page.url.toString()} /> <meta property="og:type" content="website" /> <meta property="og:image" content="{env.PUBLIC_BASE_PATH}/img/logo-512.png" /> {/if} </svelte:head> <main> <div class="min-h-[calc(100vh-3.5rem)] h-full w-full" class:min-h-screen={onAdminPage}> <slot /> </div> </main> <nav> <div class="fixed bottom-4 right-4 sm:left-4 sm:right-[initial] group/menu-bar flex flex-col-reverse justify-center items-center z-50" class:hidden={onAdminPage} 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) { let activePath = navPaths.find((path) => path.active); if (activePath !== undefined) { goto(activePath.href); } showMenuPermanent = !showMenuPermanent; } }} on:touchend={() => { isTouch = true; showMenuPermanent = !showMenuPermanent; }} > <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} on:click={() => goto(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 z-10" class:opacity-0={!navPath.active} src="{env.PUBLIC_BASE_PATH}/img/selected-frame.png" alt="menu hover" /> </a> </li> {/each} </ul> </div> </div> </nav> {#if !onAdminPage && $page.url.pathname !== `${env.PUBLIC_BASE_PATH}/register`} <footer> <div class="flex justify-around items-center h-14 w-full bg-base-300" class:hidden={onAdminPage} > <div class="hidden sm:block"> <p>© {new Date().getFullYear()} MHSL Craftattack Team</p> </div> <div class="flex gap-4"> <a class="link" href="https://mhsl.eu/id.html" target="_blank">Impressum</a> <a class="link" href="https://mhsl.eu/datenschutz.html" target="_blank">Datenschutz</a> </div> </div> </footer> {/if}