|
|
|
@ -5,6 +5,7 @@
|
|
|
|
|
export let sections = [];
|
|
|
|
|
export let active_section = null;
|
|
|
|
|
export let show_contents;
|
|
|
|
|
export let prevent_sidebar_scroll = false;
|
|
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
|
// ------------------------------------------
|
|
|
|
@ -42,8 +43,8 @@
|
|
|
|
|
|
|
|
|
|
afterUpdate(() => {
|
|
|
|
|
// bit of a hack — prevent sidebar scrolling if
|
|
|
|
|
// TOC is open on mobile
|
|
|
|
|
if (show_contents && window.innerWidth < 832) return;
|
|
|
|
|
// TOC is open on mobile, or scroll came from within sidebar
|
|
|
|
|
if (prevent_sidebar_scroll || show_contents && window.innerWidth < 832) return;
|
|
|
|
|
|
|
|
|
|
const active = ul.querySelector('.active');
|
|
|
|
|
|
|
|
|
@ -97,7 +98,12 @@
|
|
|
|
|
.active { color: var(--prime) }
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<ul bind:this={ul} class="guide-toc">
|
|
|
|
|
<ul
|
|
|
|
|
bind:this={ul}
|
|
|
|
|
class="guide-toc"
|
|
|
|
|
on:mouseenter="{() => prevent_sidebar_scroll = true}"
|
|
|
|
|
on:mouseleave="{() => prevent_sidebar_scroll = false}"
|
|
|
|
|
>
|
|
|
|
|
{#each sections as section}
|
|
|
|
|
<li>
|
|
|
|
|
<a class="section" class:active="{section.slug === active_section}" href="guide#{section.slug}">
|
|
|
|
|