Sliding Svelte Menu with animation

App.svelte

<script>
	import { writable } from 'svelte/store';
	import { tweened } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';

	const menuOpened = writable(false);
	const menuLeft = tweened(-30, {
		duration: 200,
		easing: cubicOut,
	});
	const mainLeft = tweened(0, {
		duration: 200,
		easing: cubicOut,
	});
	const openMenu = () => {
		menuLeft.set(0);
		mainLeft.set(20);// not 30 to give a parallax kind of effect
		menuOpened.set(true);
	};
	const closeMenu = () => {
		menuLeft.set(-30);
		mainLeft.set(0);
		menuOpened.set(false);
	};
</script>

<style>
	* {
		box-sizing: border-box;
		color: #555;
	}
	div.menu {
		background: #ff7000;
		width: 30vw;
		height: 100vh;
		position: absolute;
		top:0;
		left:-30vw;
		padding: 5vh 5vw;
		z-index: 1;
	}
	div.main {
		background: rgba(120,0,100,.3);
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		padding: 5vh 15vw;
	}
</style>

<div class='main' style="left: {$mainLeft}vw;">
	<h1>
		Main panel
	</h1>
	<p>
		This is a sample of Svelte app with an animated side menu.
	</p>
	{#if !$menuOpened}
	<button on:click={() => openMenu()}>
		Open Menu
	</button>
	{/if}
</div>
<div class='menu' style="left: {$menuLeft}vw;">
	<h2>
		Menu
	</h2>
	<p>
		Here are the menu contents. Kind of empty at the moment.
	</p>
	{#if $menuOpened}
	<button on:click={() => closeMenu()}>
		Close Menu
	</button>
	{/if}
</div>