---
export let title: string;
export let inputPath: string;
export let headers: string;
---

<style lang="scss">
@use "../../public/styles/var" as *;

.header {
  margin-top: 0;
  margin-bottom: 8px;
  color: rgba($white, 0.6);
  font-weight: 600;
  font-size: 20px;
  font-family: $heading;
  line-height: 1.2;

  @media (min-width: $breakpoint-m) {
    color: $dark-grey;
  }
}

.subnav {
  position: static;
  z-index: 1;

  .header {
    color: $dark-grey;
  }

  hr {
    display: block;
    height: 1px;
    margin: 1rem 0;
    background-color: $light-grey;
    border: none;
    appearance: none;
  }

  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    line-height: 1.8;
  }

  a {
    color: $grey;
  }
}
</style>

<script type="module" defer src="/js/index.js"></script>
<aside class="subnav">
  {headers.length > 0 && (
    <div>
      <h4 class="header">On this page</h4>
      <nav class="toc">
        <ol>
          {headers.map((heading) => {
          return <li><a href={"#" + heading.slug}>{heading.text}</a></li>
          })}
        </ol>
      </nav>
      <hr />
    </div>
  )}

  <h4 class="header">Suggest a change</h4>
  <a href="https://github.com/snowpackjs/snowpack/blob/main/www/{inputPath}">Edit this page on GitHub</a>
</aside>