MobileNav with Svelte

MobileNav.svelte

<script>
	export let segment

	let isNavOpen = false
	function toggleNav() {
		isNavOpen = !isNavOpen
	}
	function closeNav() {
		isNavOpen = false
	}

	function handleKeydown(event) {
		// Close nav when ESC is pressed
		if (event.keyCode === 27) {
			closeNav()
		}
	}
</script>

<style>
	.wrapper {
		@apply absolute z-20 opacity-0 pointer-events-none overflow-y-auto scrolling-touch;
		top: 0.5rem;
		right: 0.5rem;
		pointer-events: none;
		overscroll-behavior-y: contain;
		transition: all 0.2s ease;
		transform: scale(0.95);
		transform-origin: top right;

		&.is-open {
			opacity: 1;
			transform: none;
			pointer-events: auto;
		}
	}

	.menu-overlay {
		@apply fixed inset-0 z-10 opacity-0 pointer-events-none;
		background: rgba(0, 0, 0, 0.5);
		transition: all 0.2s ease;

		&.is-shown {
			opacity: 1;
			pointer-events: auto;
		}
	}

	a {
		&:hover:not([aria-current='page']) {
			@apply text-purple-300;
		}
	}

	[aria-current='page'] {
		@apply text-purple-400;
	}
</style>

<svelte:window on:keydown={handleKeydown} />

<button
	id="nav-toggle-button"
	type="button"
	class="sm:hidden p-5 text-white"
	on:click={toggleNav}
>
	<span class="sr-only">Menu</span>

	<svg
		width="24"
		height="24"
		viewBox="0 0 24 24"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<path
			d="M22 18.0048C22 18.5544 21.5544 19 21.0048 19H12.9952C12.4456 19 12
			18.5544 12 18.0048C12 17.4552 12.4456 17.0096 12.9952
			17.0096H21.0048C21.5544 17.0096 22 17.4552 22 18.0048Z"
			fill="currentColor"
		/>
		<path
			d="M22 12.0002C22 12.5499 21.5544 12.9954 21.0048 12.9954H2.99519C2.44556
			12.9954 2 12.5499 2 12.0002C2 11.4506 2.44556 11.0051 2.99519
			11.0051H21.0048C21.5544 11.0051 22 11.4506 22 12.0002Z"
			fill="currentColor"
		/>
		<path
			d="M21.0048 6.99039C21.5544 6.99039 22 6.54482 22 5.99519C22 5.44556
			21.5544 5 21.0048 5H8.99519C8.44556 5 8 5.44556 8 5.99519C8 6.54482
			8.44556 6.99039 8.99519 6.99039H21.0048Z"
			fill="currentColor"
		/>
	</svg>
</button>

<div
	on:click={closeNav}
	class:is-shown={isNavOpen}
	class="menu-overlay sm:hidden"
/>

<div
	id="mobile-nav"
	class="wrapper sm:hidden max-w-xs bg-gray-900 shadow-md rounded border
	border-gray-800"
	class:is-open={isNavOpen}
>
	<div class="px-5 sm:px-8 pb-3 w-full flex flex-col">
		<button
			id="nav-close-button"
			type="button"
			on:click={closeNav}
			class="p-5 -mx-5 text-white flex justify-end"
		>
			<span class="sr-only">Close</span>

			<span class="-mx-1">
				<svg
					width="24"
					height="24"
					viewBox="0 0 24 24"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
				>
					<path
						d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108
						4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858
						12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114
						19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12
						13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889
						19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142
						12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189
						4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12
						10.5858L6.2253 4.81108Z"
						fill="currentColor"
					/>
				</svg>
			</span>
		</button>

		<div class="pl-1 all-smcp tracking-wider text-xl text-right flex flex-col">
			<a
				href="/"
				aria-current={segment === undefined ? 'page' : undefined}
				class="py-2"
				on:click={closeNav}
				rel="prefetch"
			>
				Home
			</a>
			<a
				href="/works/"
				aria-current={segment === 'works' ? 'page' : undefined}
				class="py-2"
				on:click={closeNav}
				rel="prefetch"
			>
				Works
			</a>
			<a
				href="/blog/"
				aria-current={segment === 'blog' ? 'page' : undefined}
				class="py-2"
				on:click={closeNav}
				rel="prefetch"
			>
				Blog
			</a>
			<a
				href="/about/"
				aria-current={segment === 'about' ? 'page' : undefined}
				class="py-2"
				on:click={closeNav}
				rel="prefetch"
			>
				About
			</a>
			<a
				href="/contact/"
				aria-current={segment === 'contact' ? 'page' : undefined}
				class="py-2"
				on:click={closeNav}
				rel="prefetch"
			>
				Contact
			</a>
		</div>
	</div>
</div>