<template>
   <teleport to="#content_conainter .container.content .container">
      <div class="sticky-section" id="navmap">
         <nav>
            <a href="#top">
               <i class="fa fa-fw fa-square-o"></i>
               <span>Haut</span>
            </a>
            <a href="#section-10">
               <i class="fa fa-fw fa-square"></i>
               <span>1</span>
            </a>
            <a href="#section-20">
               <i class="fa fa-fw fa-square"></i>
               <span>2</span>
            </a>
            <a href="#section-30">
               <i class="fa fa-fw fa-square"></i>
               <span>3</span>
            </a>
            <a href="#section-40">
               <i class="fa fa-fw fa-square"></i>
               <span>4</span>
            </a>
            <a href="#section-50">
               <i class="fa fa-fw fa-square"></i>
               <span>5</span>
            </a>
            <a href="#section-60" v-if="accompanyingCourse.step === 'DRAFT'">
               <i class="fa fa-fw fa-square"></i>
               <span>6</span>
            </a>
            <a href="#section-70" v-if="accompanyingCourse.step === 'DRAFT'">
               <i class="fa fa-fw fa-square"></i>
               <span>7</span>
            </a>
            <!--a href="#bottom">
               <i class="fa fa-fw fa-square-o"></i>
               <span>Bas</span>
            </a-->
         </nav>
      </div>
   </teleport>
</template>

<script>
const stickyNav = document.querySelector('#navmap');

export default {
   name: "StickyNav",
   computed: {
      accompanyingCourse() {
         return this.$store.state.accompanyingCourse
      },
   },
   mounted() {
      this.bing();
   },
   methods: {
      bing() {
         console.log('coucou');
         
      }
   }
}
</script>

<style lang="scss" scoped>
div.sticky-section {
   position: absolute;
   top: 33px;
   left: -10%;
   nav {
      font-size: small;
      a {
         display: block;
         box-sizing: border-box;
         margin-bottom: -3px;
         color: #71859669;
         span {
            display: none;
         }
         &:hover {
            color: #718596b5;
            span {
               display: inline;
               padding-left: 8px;
            }
         }
         &.active {
            color: #df6a27;
         }
      }
   }
}
@media only screen and (max-width: 768px) {
   div.sticky-section {
      display: none;
   }
}
</style>
