svelte/site/src/routes/examples/_TableOfContents.svelte

<script>
	export let sections = [];
	export let active_section = null;
</script>

<style>
	.examples-toc {
		overflow-y: auto;
		height: 100%;
		border-right: 1px solid var(--second);
		background-color: var(--second);
		color: white;
		padding: 3rem 3rem 0 3rem;
	}

	.examples-toc li {
		display: block;
		line-height: 1.2;
		margin: 0 0 4.8rem 0;
	}

	.section-title {
		display: block;
		padding: 0 0 .8rem 0;
		font: 400 var(--h6) var(--font);
		text-transform: uppercase;
		letter-spacing: 0.12em;
		font-weight: 700;
	}

	a {
		display: flex;
		position: relative;
		color: white;
		border-bottom: none;
		padding: 0.2rem 3rem;
		margin: 0 -3rem;
		font-size: 1.6rem;
		align-items: center;
		justify-content: start;
	}

	a:hover {
		color: var(--flash);
	}

	a.active {
		background: rgba(255, 255, 255, 0.1) calc(100% - 3rem) 50% no-repeat url(/icons/arrow-right.svg);
		background-size: 1em 1em;
		color: white;
	}

	.thumbnail {
		background-color: white;
		object-fit: contain;
		width: 5rem;
		height: 5rem;
		border-radius: 2px;
		box-shadow: 1px 1px 3px rgba(0,0,0,0.13);
		margin: 0.2em 0.5em 0.2em 0;
	}
</style>

<ul class="examples-toc">
	{#each sections as section}
		<li>
			<span class="section-title">
				{section.title}
			</span>

			{#each section.examples as example}
				<a
					href="examples#{example.slug}"
					class="row"
					class:active="{example.slug === active_section}"
				>
					<img
						class="thumbnail"
						alt="{example.title} thumbnail"
						src="examples/thumbnails/{example.slug}.jpg"
					>

					<span>{example.title}</span>
				</a>
			{/each}
		</li>
	{/each}
</ul>