---
import type { MarkdownHeading } from 'astro';
import TableOfContents from './TableOfContents';
import MoreMenu from './MoreMenu.astro';

type Props = {
	headings: MarkdownHeading[];
	githubEditUrl: string;
};

const { headings, githubEditUrl } = Astro.props;
---

<nav class="sidebar-nav" aria-labelledby="grid-right">
	<div class="sidebar-nav-inner">
		<TableOfContents client:media="(min-width: 50em)" headings={headings} />
		<MoreMenu editHref={githubEditUrl} />
	</div>
</nav>

<style>
	.sidebar-nav {
		width: 100%;
		position: sticky;
		top: 0;
	}

	.sidebar-nav-inner {
		height: 100%;
		padding: 0;
		padding-top: var(--doc-padding);
		overflow: auto;
	}
</style>