diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
deleted file mode 100644
index c2c11c7..0000000
--- a/src/lib/components/Sidebar.svelte
+++ /dev/null
@@ -1,179 +0,0 @@
-<script lang="ts">
-	import type { Page } from '@sveltejs/kit';
-
-	import { page } from '$app/stores';
-
-	import { routes } from '$lib/routes';
-	import { onDestroy, onMount } from 'svelte';
-	import { browser } from '$app/environment';
-	import { getLocaleForSSR } from '$lib/utils/get-locale';
-	import { selectedLocale } from '$lib/store/selected-locale';
-	import { testIds } from '$lib/utils/dom-utils';
-	import OpenInNewTab from '$lib/components/ui/icons/OpenInNewTab.svelte';
-	import DarkModeToggle from './ui/DarkModeToggle.svelte';
-
-	const matchMedia = browser ? window.matchMedia('(min-width: 900px)') : null;
-	const locale = browser ? $selectedLocale : getLocaleForSSR($page);
-
-	$: isDesktop = Boolean(matchMedia?.matches);
-	$: open = isDesktop;
-
-	let path: string;
-
-	const getPath = (page: Page<Record<string, string>>): void => {
-		path = page.url.pathname;
-	};
-
-	$: getPath($page);
-
-	const onClickMenu = (event: MouseEvent) => {
-		if (isDesktop) return;
-		const eventTarget = event.target as HTMLElement;
-		const clickedLink = eventTarget.tagName === 'A';
-		if (!clickedLink) return;
-		const menu = document.getElementById('sidebar');
-		if (!menu?.contains(eventTarget)) return;
-		open = false;
-	};
-
-	// eslint-disable-next-line no-undef
-	const onMatchMediaChange = (event: MediaQueryListEventMap['change']) => {
-		isDesktop = event.matches;
-		open = event.matches;
-	};
-
-	onMount(() => {
-		if (browser) {
-			window.addEventListener('click', onClickMenu);
-		}
-		if (browser && matchMedia) {
-			matchMedia.addEventListener('change', onMatchMediaChange);
-		}
-	});
-
-	onDestroy(() => {
-		if (browser) {
-			window.removeEventListener('click', onClickMenu);
-		}
-		if (browser && matchMedia) {
-			matchMedia.removeEventListener('change', onMatchMediaChange);
-		}
-	});
-</script>
-
-<details class="sidebar" id="sidebar" bind:open>
-	<summary>
-		<p class="menu-button">Menu</p>
-		{#if !isDesktop}
-			<div class="dark-mode-toggle">
-				<DarkModeToggle />
-			</div>
-		{/if}
-	</summary>
-	<nav aria-label="Main Menu" data-testid={testIds.navigation}>
-		<ul>
-			<li class="last-item" class:active={path === '/'}><a href="/?locale={locale}">About</a></li>
-			<li class="last-item">
-				<a href="/Playground?locale={locale}" class:active={path.includes('Playground')}
-					>Playground</a
-				>
-			</li>
-			<li class="menu-heading">Intl.</li>
-			{#each routes as route, i}
-				<li class="route" class:last-item={i === routes.length - 1}>
-					<a
-						aria-label={route.ariaLabel}
-						class:sublink={route.sublink}
-						class:active={path.includes(route.path)}
-						href={`/${route.path}?locale=${locale}`}
-					>
-						{route.name}
-						{#if route.experimental}
-							<img height="16" width="16" src="/icons/experimental.svg" alt="Experimental" />
-						{/if}
-					</a>
-				</li>
-			{/each}
-			<li class="menu-heading">Meta</li>
-			<li>
-				<a
-					class="github"
-					href="https://github.com/jesperorb/intl-explorer"
-					target="_blank"
-					rel="noopener noreferrer">GitHub <OpenInNewTab /></a
-				>
-			</li>
-		</ul>
-	</nav>
-	{#if isDesktop}
-		<div class="dark-mode-toggle-desktop">
-			<DarkModeToggle />
-		</div>
-	{/if}
-</details>
-
-<style>
-	.menu-heading,
-	.route {
-		margin-bottom: var(--spacing-1);
-	}
-	.dark-mode-toggle {
-		position: fixed;
-		top: var(--spacing-2);
-		right: var(--spacing-4);
-	}
-	.dark-mode-toggle-desktop {
-		position: fixed;
-		bottom: var(--spacing-4);
-		left: var(--spacing-4);
-	}
-
-	.menu-heading {
-		font-size: 1.25rem;
-	}
-	.last-item {
-		margin-bottom: var(--spacing-4);
-	}
-	.sidebar {
-		padding: var(--spacing-2) var(--spacing-4);
-		display: flex;
-		flex-direction: column;
-		background-color: var(--accent-background-color);
-	}
-	nav {
-		padding-top: var(--spacing-4);
-	}
-	.menu-button {
-		text-transform: uppercase;
-		letter-spacing: 0.1rem;
-		font-weight: bold;
-		font-size: 1.25rem;
-		user-select: none;
-		display: inline-block;
-	}
-	summary {
-		list-style: none;
-	}
-	summary::marker,
-	summary::-webkit-details-mark {
-		display: none;
-	}
-	.active {
-		font-weight: bold;
-	}
-
-	@keyframes fadeIn {
-		0% {
-			opacity: 0;
-			transform: translateX(-10px);
-		}
-		100% {
-			opacity: 1;
-			transform: translateX(0);
-		}
-	}
-
-	details[open] summary ~ * {
-		animation: fadeIn 0.3s;
-	}
-</style>
diff --git a/src/lib/components/ui/DarkModeToggle.svelte b/src/lib/components/ui/DarkModeToggle.svelte
index e58c30b..4d0a0c1 100644
--- a/src/lib/components/ui/DarkModeToggle.svelte
+++ b/src/lib/components/ui/DarkModeToggle.svelte
@@ -70,4 +70,9 @@
 	.checkbox:checked + .checkbox-label .ball {
 		transform: translateX(24px);
 	}
+
+	.checkbox:focus + .checkbox-label {
+		box-shadow: 0px 0px 2px var(--highlight);
+		outline: 1px solid var(--highlight);
+	}
 </style>
diff --git a/src/lib/components/ui/Main.svelte b/src/lib/components/ui/Main.svelte
index 12e5812..6a512b3 100644
--- a/src/lib/components/ui/Main.svelte
+++ b/src/lib/components/ui/Main.svelte
@@ -12,7 +12,6 @@
 		main {
 			z-index: 2;
 			max-width: 100%;
-			margin-top: var(--spacing-2);
 		}
 		.wrapper {
 			border-radius: 6px 0 0 6px;
diff --git a/src/lib/components/ui/Navigation.svelte b/src/lib/components/ui/Navigation.svelte
new file mode 100644
index 0000000..eb61e8b
--- /dev/null
+++ b/src/lib/components/ui/Navigation.svelte
@@ -0,0 +1,219 @@
+<script lang="ts">
+	import type { Page } from '@sveltejs/kit';
+
+	import { page } from '$app/stores';
+
+	import { routes } from '$lib/routes';
+	import { browser } from '$app/environment';
+	import { getLocaleForSSR } from '$lib/utils/get-locale';
+	import { selectedLocale } from '$lib/store/selected-locale';
+	import { testIds } from '$lib/utils/dom-utils';
+	import OpenInNewTab from '$lib/components/ui/icons/OpenInNewTab.svelte';
+	import DarkModeToggle from './DarkModeToggle.svelte';
+	import Spacing from './Spacing.svelte';
+
+	const locale = browser ? $selectedLocale : getLocaleForSSR($page);
+
+	let path: string;
+	let open = false;
+	let closeButton: HTMLButtonElement;
+	let openButton: HTMLButtonElement;
+	let lastItem: HTMLAnchorElement;
+
+	const getPath = (page: Page<Record<string, string>>): void => {
+		path = page.url.pathname;
+	};
+
+	$: getPath($page);
+
+	const onCloseButtonShiftTab = (event: KeyboardEvent) => {
+		if(event.key === "Tab" && event.shiftKey) {
+			event.preventDefault();
+			lastItem.focus();
+		}
+	}
+
+	const onLastItemKeyPress = (event: KeyboardEvent) => {
+		if(event.key === "Tab") {
+			event.preventDefault();
+			closeButton.focus();
+		}
+	}
+
+	const onKeyDown = (event: KeyboardEvent) => {
+		if(event.key === "Escape") {
+			event.preventDefault();
+			closeDrawer();
+		}
+		if(event.key === "Enter" && (event.target as HTMLElement).nodeName === "A") {
+			closeDrawer();
+		}
+	}
+
+	const onClick = (event: MouseEvent) => {
+		if((event.target as HTMLElement).nodeName === "A") {
+			closeDrawer();
+		}
+	}
+
+	const openDrawer = () => {
+		open = true;
+		setTimeout(() => {
+			closeButton.focus();
+		}, 0);
+	}
+
+	const closeDrawer = () => {
+		open = false;
+		setTimeout(() => {
+			openButton.focus();
+		}, 0);
+	}
+</script>
+
+<nav aria-label="Main Menu" data-testid={testIds.navigation}>
+	<div class="actions">
+		<button
+			type="button"
+			id="openMenuButton"
+			class="nav-button"
+			aria-label="Open navigation"
+			aria-controls="links"
+			aria-expanded="false"
+			on:click={openDrawer}
+			bind:this={openButton}
+		>
+			Menu
+		</button>
+		<div class="settings">
+			<DarkModeToggle />
+		</div>
+	</div>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="drawer" class:drawer--open={open} on:keydown={onKeyDown} on:click={onClick}>
+		<div class="drawer__top">
+			<button
+				type="button"
+				id="closeMenuButton"
+				class="close-button"
+				aria-label="Close navigation"
+				on:click={closeDrawer}
+				bind:this={closeButton}
+				on:keydown={onCloseButtonShiftTab}
+			>
+				&times;
+			</button>
+		</div>
+		<Spacing />
+		<ul id="links">
+			<li class="last-item" class:active={path === '/'}><a href="/?locale={locale}">About</a></li>
+			<li class="last-item">
+				<a href="/Playground?locale={locale}" class:active={path.includes('Playground')}
+				>Playground</a
+				>
+			</li>
+			<li class="menu-heading">Intl.</li>
+			{#each routes as route, i}
+				<li class="route" class:last-item={i === routes.length - 1}>
+					<a
+					aria-label={route.ariaLabel}
+					class:sublink={route.sublink}
+					class:active={path.includes(route.path)}
+					href={`/${route.path}?locale=${locale}`}
+					>
+					{route.name}
+					{#if route.experimental}
+					<img height="16" width="16" src="/icons/experimental.svg" alt="Experimental" />
+					{/if}
+				</a>
+			</li>
+		{/each}
+			<li class="menu-heading">Meta</li>
+			<li>
+				<a
+					class="github"
+					href="https://github.com/jesperorb/intl-explorer"
+					target="_blank"
+					rel="noopener noreferrer"
+					on:keydown={onLastItemKeyPress}
+					bind:this={lastItem}
+				>GitHub <OpenInNewTab /></a>
+			</li>
+		</ul>
+	</div>
+</nav>
+
+<style>
+	.drawer {
+		visibility: hidden;
+		position: fixed;
+		top: 0;
+		left: -250px;
+		width: 250px;
+		background-color: var(--card-color);
+		height: 100%;
+		padding: var(--spacing-4);
+		z-index: 1;
+		overflow-x: hidden;
+		transition: transform 0.3s;
+		box-shadow: 4px 4px 8px 2px hsla(276, 100%, 20%, 0.1);
+		border-top-right-radius: 4px;
+		border-bottom-right-radius: 4px;
+	}
+	.drawer--open {
+		visibility: visible;
+		transform: translateX(250px);
+	}
+	.drawer__top {
+		display: flex;
+		justify-content: end;
+	}
+	.actions {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--spacing-2);
+	}
+	.settings {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-2);
+	}
+	.nav-button {
+		border: none;
+		padding: var(--spacing-2) var(--spacing-3);
+		background: none;
+		text-transform: uppercase;
+		font-weight: bold;
+		cursor: pointer;
+		font-size: 1.25rem;
+		color: var(--text-color);
+	}
+	.nav-button:hover, .close-button:hover {
+		border-radius: 4px;
+    outline: 1px solid var(--text-color);
+	}
+	.close-button {
+		border: none;
+		background: none;
+		text-transform: uppercase;
+		font-weight: bold;
+		cursor: pointer;
+		margin-left: auto;
+		padding: var(--spacing-2) var(--spacing-3);
+		border-radius: 4px;
+		color: var(--text-color);
+	}
+	.menu-heading, .route {
+		margin-bottom: var(--spacing-1);
+	}
+	.menu-heading {
+		font-size: 1.25rem;
+	}
+	.last-item {
+		margin-bottom: var(--spacing-4);
+	}
+	.active {
+		font-weight: bold;
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f337e88..e1e0328 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
 	import type { FormatMethodsKeys } from '$lib/format-methods';
 	import { page, navigating } from '$app/stores';
 
-	import Sidebar from '$lib/components/Sidebar.svelte';
+	import Navigation from '$lib/components/ui/Navigation.svelte';
 	import Main from '$lib/components/ui/Main.svelte';
 	import SkipLink from '$lib/components/ui/SkipLink.svelte';
 	import ProgressBar from '$lib/components/ui/ProgressBar.svelte';
@@ -14,6 +14,10 @@
 	let routeId: FormatMethodsKeys | 'Playground';
 	const getRouteId = (page: Page<Record<string, string>>): void => {
 		routeId = page.route.id?.replace('/', '') as FormatMethodsKeys;
+		if(browser) {
+			document.querySelector("h1")?.setAttribute("tabIndex", "-1");
+			document.querySelector("h1")?.focus();
+		}
 	};
 	$: getRouteId($page);
 	onMount(() => {
@@ -36,7 +40,7 @@
 
 <SkipLink />
 
-<Sidebar />
+<Navigation />
 
 <Main>
 	{#if $navigating}
@@ -141,12 +145,6 @@
 		line-height: 1.5;
 		width: 100%;
 	}
-	@media (min-width: 900px) {
-		body {
-			display: grid;
-			grid-template-columns: 12rem 1fr;
-		}
-	}
 	pre,
 	ul,
 	body,