<script>
	export let open = false

	function close() {
		open = false
	}
</script>

<aside class="absolute w-full h-full bg-gray-200 border-r-2 shadow-lg" class:open>
	<nav class="p-12 text-xl">
		<a class="block" href="/" on:click={close}>Home</a>
		<a class="block" href="/about" on:click={close}>About</a>
	</nav>
</aside>

<style>
	aside {
		left: -100%;
		transition: left 0.3s ease-in-out
	}

	.open {
		left: 0
	}
</style>