website-astro/src/components/TOC.astro

---
import { t } from "astro-i18n";
const { toc } = Astro.props;
---

<aside class="table-of-content">
	<details open="true">
		<summary>{t("index.toc")}</summary>
		<nav role="navigation" aria-label={t("index.toc")}>
			<ol class="table-of-content__list" role="list">
				{
					// loop over the toc
					toc.map((heading) =>
						// if h2, set as a li
						heading.depth === 2 ? (
							<li>
								<a href={`#${heading.slug}`} class="toc-2">
									{heading.text}
								</a>
							</li>
						) : // if h3, set as inner ol > li
						heading.depth === 3 ? (
							<ol role="list">
								<li>
									<a href={`#${heading.slug}`} class="toc-3">
										{heading.text}
									</a>
								</li>
							</ol>
						) : null
					)
				}
			</ol>
		</nav>
	</details>
</aside>

<style>
	/* Table of content */
	.table-of-content {
		margin: 0;
		padding: 0;
		position: relative;
		display: block;
		font-size: var(--size--1);
	}
	.table-of-content details {
		position: sticky;
		top: var(--space-m);
	}
	summary {
		padding: var(--space-2xs-xs);
		font-size: var(--size-0);
		font-weight: 500;
		background-color: var(--color-soft-blue);
	}
	.table-of-content__list {
		padding: 0 var(--space-2xs);
		padding-block-end: var(--space-2xs);
		border: 2px solid var(--color-soft-blue);
	}
	.table-of-content__list a {
		position: relative;
		display: inline-block;
		font-weight: normal;
		color: var(--color-grey);
		text-decoration: none;
	}

	.table-of-content__list a::before {
		content: "·";
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-6px, 0);
		color: var(--color-grey);
	}
	.table-of-content__list a:visited::before {
		color: white;
	}

	.table-of-content__list a:focus,
	.table-of-content__list a:hover {
		color: var(--color-violet);
		text-decoration: underline;
	}
	.toc-2 {
		margin: 0.8rem 0 0.3rem;
	}
	.toc-3 {
		margin-inline-start: 1rem;
		margin-block-start: 0.4rem;
	}
</style>