Subnav.astro

---
const { title, inputPath, headers } = Astro.props;
---

<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;
  padding: 2rem 0 24px 0;

  @media (min-width: 1240px) {
    position:-webkit-sticky;
    position: sticky;
    top: 56px;
    z-index: 1;
    display: block;
    max-height: calc(100vh - 56px);
    color: inherit;
    background: none;
    -webkit-overflow-scrolling: touch;
  }


  .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;
  }

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/docs">Edit this page on GitHub</a>
</aside>