svelte-website/src/components/misc/menu.svelte

<script>
	import {fly} from "svelte/transition";
	import {swipe} from "svelte-gestures";
	import Button from './navbutton.svelte';
	import { browser } from '$app/env';
	export /**
	 * @type {any}
	 */
	let open;
	$: if (browser) document.body.classList[open ? 'add' : 'remove']('overflow-hidden');
</script>

{#if open}
	<div
		on:click={() => {
			open = !open;
		}}
		transition:fly={{x: -600}}
		class="z-10 bg-gradient-to-tr dark:bg-gradient-to-tr absolute top-0 left-0 h-screen w-screen flex flex-col gap-4 text-center pt-16
		{open ? "translate-x-0" : "-translate-x-full"}
		"
	>
		<Button link="/" text="Home" />
		<Button link="/about" text="About" />
		<Button link="/galaxies" text="Galaxies" />
	</div>
{/if}