From 5c36fbf377792d49277ea0eb8adad87221905141 Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Sat, 11 Jun 2022 11:47:17 -0400
Subject: [PATCH 1/9] remove dots

---
 src/routes/tutorial/[slug]/_/Menu/Menu.svelte | 34 +------------------
 src/routes/tutorial/[slug]/_/Sidebar.svelte   |  4 +--
 2 files changed, 3 insertions(+), 35 deletions(-)

diff --git a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
index 39364f795..eb161173a 100644
--- a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
+++ b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
@@ -130,7 +130,7 @@
 		width: 100%;
 		height: 100%;
 		transition: transform 0.2s;
-		transform: translate(calc(var(--menu-width) - 100%), 0);
+		transform: translate(-100%, 0);
 		background: var(--light-blue);
 		z-index: 2;
 		/* filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1)); */
@@ -242,38 +242,6 @@
 		--color: var(--second);
 	}
 
-	.section > a::before,
-	.section > a::after {
-		content: '';
-		top: calc(1.3rem - 0.5 * var(--dot-size));
-		right: calc(0.5 * (var(--menu-width) - var(--dot-size)) - 0.7rem);
-		width: var(--dot-size);
-		height: var(--dot-size);
-		border-radius: 50%;
-		border: 1px solid var(--color);
-		box-sizing: border-box;
-	}
-
-	.section a::after {
-		transform: scale(0);
-		transition: transform 0.2s;
-		background: var(--color);
-	}
-
-	.part > a::after,
-	.chapter > a::after {
-		content: attr(data-label);
-		width: var(--menu-width);
-		text-align: center;
-		top: 0.2rem;
-		right: -0.7rem;
-		color: hsl(240, 8%, 64%);
-	}
-
-	.section[aria-current='page'] > a::after {
-		transform: none;
-	}
-
 	a {
 		color: var(--second);
 		padding: 0 0 0 0.5rem;
diff --git a/src/routes/tutorial/[slug]/_/Sidebar.svelte b/src/routes/tutorial/[slug]/_/Sidebar.svelte
index 8a4051f6c..9afa44317 100644
--- a/src/routes/tutorial/[slug]/_/Sidebar.svelte
+++ b/src/routes/tutorial/[slug]/_/Sidebar.svelte
@@ -142,7 +142,7 @@
 	.text {
 		flex: 1 1;
 		overflow-y: auto;
-		padding: 2.2rem 2.2rem 2.2rem calc(var(--menu-width) + 2.2rem);
+		padding: 2.2rem;
 		color: var(--second);
 		border-right: 1px solid var(--border-color);
 	}
@@ -256,7 +256,7 @@
 	}
 
 	footer {
-		padding: 1.5rem 2.2rem 1.5rem calc(var(--menu-width) + 2.2rem);
+		padding: 1.5rem 2.2rem;
 		display: flex;
 		justify-content: space-between;
 		border-top: 1px solid var(--border-color);

From 94985f9cfaa2eb22118a7c7a4f9eb5a67e92dc47 Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Sat, 11 Jun 2022 11:49:22 -0400
Subject: [PATCH 2/9] smidge more lateral padding

---
 src/routes/tutorial/[slug]/_/Sidebar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/tutorial/[slug]/_/Sidebar.svelte b/src/routes/tutorial/[slug]/_/Sidebar.svelte
index 9afa44317..13fcc4f4d 100644
--- a/src/routes/tutorial/[slug]/_/Sidebar.svelte
+++ b/src/routes/tutorial/[slug]/_/Sidebar.svelte
@@ -142,7 +142,7 @@
 	.text {
 		flex: 1 1;
 		overflow-y: auto;
-		padding: 2.2rem;
+		padding: 2.2rem 3rem;
 		color: var(--second);
 		border-right: 1px solid var(--border-color);
 	}

From 50fcfabcfcd50a21af00a226729b36d1e3d4f0ae Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Sat, 11 Jun 2022 11:50:01 -0400
Subject: [PATCH 3/9] tweak footer padding

---
 src/routes/tutorial/[slug]/_/Sidebar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/tutorial/[slug]/_/Sidebar.svelte b/src/routes/tutorial/[slug]/_/Sidebar.svelte
index 13fcc4f4d..7495e7913 100644
--- a/src/routes/tutorial/[slug]/_/Sidebar.svelte
+++ b/src/routes/tutorial/[slug]/_/Sidebar.svelte
@@ -256,7 +256,7 @@
 	}
 
 	footer {
-		padding: 1.5rem 2.2rem;
+		padding: 1rem 3rem;
 		display: flex;
 		justify-content: space-between;
 		border-top: 1px solid var(--border-color);

From 0d7f79f3a2bd7cb46ad903f585dbd4f293c15f6e Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Sat, 11 Jun 2022 11:57:22 -0400
Subject: [PATCH 4/9] refactor

---
 src/routes/tutorial/[slug]/_/Menu/Menu.svelte | 37 ++++++++++++++++--
 src/routes/tutorial/[slug]/_/Sidebar.svelte   | 39 +------------------
 2 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
index eb161173a..e9842707d 100644
--- a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
+++ b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
@@ -43,10 +43,6 @@
 	afterNavigate(() => {
 		search = '';
 	});
-
-	export function open() {
-		is_open = true;
-	}
 </script>
 
 <div class="menu-toggle-container">
@@ -60,6 +56,13 @@
 	</button>
 </div>
 
+<header on:click={() => (is_open = true)}>
+	<h1>
+		Part {current.part.index + 1} > {current.chapter.title} >
+		<strong>{current.title}</strong>
+	</h1>
+</header>
+
 <nav class:open={is_open} aria-label="tutorial sections">
 	<div class="controls">
 		<input
@@ -124,6 +127,32 @@
 </nav>
 
 <style>
+	header {
+		display: flex;
+		border-bottom: 1px solid var(--border-color);
+		border-right: 1px solid var(--border-color);
+		padding: 0 0 0 calc(var(--menu-width) + 2.2rem);
+		height: var(--menu-width);
+		align-items: center;
+	}
+
+	header strong,
+	header h1 {
+		font-size: 1.4rem;
+	}
+
+	header strong {
+		color: var(--prime);
+	}
+
+	header h1 {
+		color: var(--second);
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		font-weight: 400;
+	}
+
 	nav {
 		--menu-width: 5.4rem;
 		position: absolute;
diff --git a/src/routes/tutorial/[slug]/_/Sidebar.svelte b/src/routes/tutorial/[slug]/_/Sidebar.svelte
index 7495e7913..f85e86659 100644
--- a/src/routes/tutorial/[slug]/_/Sidebar.svelte
+++ b/src/routes/tutorial/[slug]/_/Sidebar.svelte
@@ -2,7 +2,6 @@
 	import { createEventDispatcher } from 'svelte';
 	import { afterNavigate } from '$app/navigation';
 	import Modal from '$lib/components/Modal.svelte';
-	import { Icon } from '@sveltejs/site-kit';
 	import Menu from './Menu/Menu.svelte';
 
 	/** @type {import('$lib/types').PartStub[]} */
@@ -16,9 +15,6 @@
 	const namespace = 'learn.svelte.dev';
 	const copy_enabled = `${namespace}:copy_enabled`;
 
-	/** @type {import('svelte').SvelteComponent} */
-	let menu;
-
 	/** @type {HTMLElement} */
 	let sidebar;
 
@@ -32,14 +28,7 @@
 	});
 </script>
 
-<Menu bind:this={menu} {index} current={section} />
-
-<header on:click={() => menu.open()}>
-	<h1>
-		Part {section.part.index + 1} > {section.chapter.title} >
-		<strong>{section.title}</strong>
-	</h1>
-</header>
+<Menu {index} current={section} />
 
 <div
 	bind:this={sidebar}
@@ -113,32 +102,6 @@
 {/if}
 
 <style>
-	header {
-		display: flex;
-		border-bottom: 1px solid var(--border-color);
-		border-right: 1px solid var(--border-color);
-		padding: 0 0 0 calc(var(--menu-width) + 2.2rem);
-		height: var(--menu-width);
-		align-items: center;
-	}
-
-	header strong,
-	header h1 {
-		font-size: 1.4rem;
-	}
-
-	header strong {
-		color: var(--prime);
-	}
-
-	header h1 {
-		color: var(--second);
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		font-weight: 400;
-	}
-
 	.text {
 		flex: 1 1;
 		overflow-y: auto;

From 2727d2c8986541b94535ef7ba6b743a3587965e0 Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Sat, 11 Jun 2022 12:12:10 -0400
Subject: [PATCH 5/9] add next/prev arrows

---
 src/routes/tutorial/[slug]/_/Menu/Menu.svelte | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
index e9842707d..3289c2f90 100644
--- a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
+++ b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
@@ -56,11 +56,19 @@
 	</button>
 </div>
 
-<header on:click={() => (is_open = true)}>
-	<h1>
+<header>
+	<a href={current.prev ? `/tutorial/${current.prev.slug}` : undefined} aria-label="Previous">
+		<Icon name="arrow-left" size={16} />
+	</a>
+
+	<h1 on:click={() => (is_open = true)}>
 		Part {current.part.index + 1} > {current.chapter.title} >
 		<strong>{current.title}</strong>
 	</h1>
+
+	<a href={current.next ? `/tutorial/${current.next.slug}` : undefined} aria-label="Previous">
+		<Icon name="arrow-right" size={16} />
+	</a>
 </header>
 
 <nav class:open={is_open} aria-label="tutorial sections">
@@ -129,9 +137,11 @@
 <style>
 	header {
 		display: flex;
+		gap: 0.5rem;
+		align-items: center;
 		border-bottom: 1px solid var(--border-color);
 		border-right: 1px solid var(--border-color);
-		padding: 0 0 0 calc(var(--menu-width) + 2.2rem);
+		padding: 0 0 0 var(--menu-width);
 		height: var(--menu-width);
 		align-items: center;
 	}
@@ -151,6 +161,13 @@
 		text-overflow: ellipsis;
 		overflow: hidden;
 		font-weight: 400;
+		flex: 1;
+		top: 0.15rem;
+	}
+
+	header a:not([href]) {
+		opacity: 0.1;
+		cursor: default;
 	}
 
 	nav {
@@ -257,7 +274,7 @@
 		font-weight: bold;
 	}
 
-	li.expanded img {
+	li.expanded > img {
 		transform: rotate(90deg);
 	}
 

From 644c542a9acac8fe748db88d0cb14217966d2cbb Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Sat, 11 Jun 2022 12:13:47 -0400
Subject: [PATCH 6/9] small adjustment

---
 src/routes/tutorial/[slug]/_/Menu/Menu.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
index 3289c2f90..693a636e2 100644
--- a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
+++ b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
@@ -229,6 +229,7 @@
 		background: var(--light-blue);
 		border: 2px solid transparent;
 		box-sizing: border-box;
+		padding: 0.2rem 0 0 0;
 	}
 
 	.menu-toggle:focus-visible {

From 526dfb370009db3d6815ed4cfb34b0def53fa80e Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Sat, 11 Jun 2022 12:16:00 -0400
Subject: [PATCH 7/9] tweak header

---
 src/routes/tutorial/[slug]/_/Menu/Menu.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
index 693a636e2..9fb78e493 100644
--- a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
+++ b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
@@ -62,7 +62,8 @@
 	</a>
 
 	<h1 on:click={() => (is_open = true)}>
-		Part {current.part.index + 1} > {current.chapter.title} >
+		Part {current.part.index + 1} <span class="separator">/</span>
+		{current.chapter.title} <span class="separator">/</span>
 		<strong>{current.title}</strong>
 	</h1>
 
@@ -165,6 +166,14 @@
 		top: 0.15rem;
 	}
 
+	.separator {
+		position: relative;
+		font-size: 0.8em;
+		opacity: 0.3;
+		top: -0.1rem;
+		display: inline-block;
+	}
+
 	header a:not([href]) {
 		opacity: 0.1;
 		cursor: default;

From cd4d048d57e8b9a3c5ec004389454987d47d332a Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Sat, 11 Jun 2022 12:18:45 -0400
Subject: [PATCH 8/9] fix editor padding

---
 src/routes/tutorial/[slug]/_/Editor.svelte |  4 ++++
 src/routes/tutorial/[slug]/index.svelte    | 11 +++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/routes/tutorial/[slug]/_/Editor.svelte b/src/routes/tutorial/[slug]/_/Editor.svelte
index 3f0cc1925..6c15620ea 100644
--- a/src/routes/tutorial/[slug]/_/Editor.svelte
+++ b/src/routes/tutorial/[slug]/_/Editor.svelte
@@ -53,6 +53,10 @@
 			editor = monaco.editor.create(container, {
 				fontFamily: 'Roboto Mono',
 				fontSize: 13,
+				padding: {
+					top: 16,
+					bottom: 16
+				},
 				minimap: {
 					enabled: false
 				}
diff --git a/src/routes/tutorial/[slug]/index.svelte b/src/routes/tutorial/[slug]/index.svelte
index 0adaa91d6..5813792e4 100644
--- a/src/routes/tutorial/[slug]/index.svelte
+++ b/src/routes/tutorial/[slug]/index.svelte
@@ -282,9 +282,13 @@
 <div class="container">
 	<SplitPane type="horizontal" min="360px" max="50%" pos="33%">
 		<section class="content" slot="a">
-			<Sidebar {index} {section} on:select={e => {
-				select(/** @type {import('$lib/types').FileStub} */ (section.a[e.detail.file]));
-			}} />
+			<Sidebar
+				{index}
+				{section}
+				on:select={(e) => {
+					select(/** @type {import('$lib/types').FileStub} */ (section.a[e.detail.file]));
+				}}
+			/>
 		</section>
 
 		<section slot="b">
@@ -470,7 +474,6 @@
 	}
 
 	.editor-container {
-		padding: 0.5rem;
 		background-color: var(--light-blue);
 	}
 </style>

From bf0b98e6911d76ae8e09cfe61334bec31b86c43f Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Sat, 11 Jun 2022 12:20:10 -0400
Subject: [PATCH 9/9] tweak <pre> styles

---
 src/routes/tutorial/[slug]/_/Sidebar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/tutorial/[slug]/_/Sidebar.svelte b/src/routes/tutorial/[slug]/_/Sidebar.svelte
index f85e86659..efdd63b0e 100644
--- a/src/routes/tutorial/[slug]/_/Sidebar.svelte
+++ b/src/routes/tutorial/[slug]/_/Sidebar.svelte
@@ -155,7 +155,7 @@
 		margin: 0 0 1.6rem 0;
 		line-height: 1.3;
 		border-radius: 0.5rem;
-		box-shadow: inset 1px 1px 4px hsl(206, 20%, 85%);
+		box-shadow: inset 1px 1px 3px hsl(206deg 20% 93%);
 	}
 
 	.text :global(pre) :global(code) {