---
import '../css/pagenavi.css';
import NestedList from './NestedList.astro';

const { page } = Astro.props;

const headings = page.rendered.metadata.headings;

const items = headings
  ? headings
      .filter((h) => h.depth >= 2 && h.text !== 'Footnotes')
      .map((h) => {
        return {
          level: h.depth,
          label: '',
          title: h.text,
          link: page.data.path + '#' + h.slug,
          hide: false,
          here: false,
        };
      })
  : [];
---

{
  headings && (
    <nav
      id="page-navi"
      class="scrollable"
      aria-label="Page contents navigation"
    >
      <NestedList items={items} level={2} idx={0} />
    </nav>
  )
}
