---
interface Props {
  headings: Array<Object>;
}

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

<aside>
  <nav class='hidden lg:block sticky top-6'>
    <ul>
      {
        headings.map((heading: any) => (
          <li class='py-1'>
            {[...Array(heading.depth - 1)].map((_, _i) => (
              <span class='inline-block w-4' />
            ))}
            <a
              class='hover:text-stone transition-all duration-150 ease-in-out text-dark poppins'
              href={`#${heading.slug}`}
            >
              {heading.text}
            </a>
          </li>
        ))
      }
    </ul>
  </nav>
</aside>
