---
const { toc } = Astro.props
---

<aside class='table-of-content'>
	<details open='true'>
		<summary id='toc-title'>Table des matières</summary>
		<nav role='navigation' aria-labelledby='toc-title'>
			<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: 50%;
		left: 0;
		inline-size: 2px;
		block-size: 2px;
		border-radius: 4px;
		transform: translate(-6px, 0);
		background-color: var(--color-grey);
	}
	.table-of-content__list a:visited::before {
		background-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>