<template>
  <div id="toc">
    <p><strong>Table of Contents</strong></p>
    <ul>
      <li
        v-for="section in sections"
        :key="section.id"
      >
        <RouterLink
          v-if="section.name"
          :to="{
            name: section.name,
            params: section.params
          }"
          v-text="section.title"
        />
        <a
          v-else
          :href="`#${section.id}`"
          v-text="section.text"
        />
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'ExampleTOC',
    props: {
      sections: {
        type: Array,
        required: true,
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  #toc {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    padding: 70px 20px;
    border-right: 2px solid $tf-light-gray;
  }

  ul {
    box-sizing: border-box;
    width: 100%;
    padding-left: 20px;
    list-style: inherit;
  }

  li {
    padding: 2px 0;
  }
</style>
