diff --git a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
index 9fb78e493..b2e64270d 100644
--- a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
+++ b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
@@ -16,6 +16,9 @@
let is_open = false;
let search = '';
+ let expanded_part = current.part.slug;
+ let expanded_chapter = current.chapter.slug;
+
const duration = browser && matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 200;
$: regex = new RegExp(`\\b${search.length >= 2 ? search : ''}`, 'i');
@@ -88,23 +91,35 @@
{#each filtered as part (part.slug)}
-
+
+
- {#if search.length >= 2 || part.slug === current.part.slug}
+ {#if search.length >= 2 || part.slug === expanded_part}
{#each part.chapters as chapter (chapter.slug)}
- -
+
-
- {chapter.title}
+
- {#if search.length >= 2 || chapter.slug === current.chapter.slug}
+ {#if search.length >= 2 || chapter.slug === expanded_chapter}
{#each chapter.sections as section (section.slug)}
- button {
color: var(--prime);
}
li img {
position: absolute;
left: -2rem;
- top: 0.3rem;
+ top: 0.1rem;
width: 2rem;
height: 2rem;
transition: transform 0.2s;
}
- li.expanded > a {
+ li.expanded > button {
font-weight: bold;
}
@@ -298,7 +314,8 @@
--color: var(--second);
}
- a {
+ a,
+ button {
color: var(--second);
padding: 0 0 0 0.5rem;
margin: 0 0.5rem 0 0;