<template>
  <div class="slidebar" v-html="silde">
  </div>
</template>
<script>
import navbarData from '../nav.config.json'

export default {
  data() {
      return {
        silde: ""
      }
    },
    mounted() {
      let temp = []
      temp.push('<ul class="navigation navigation-main navigation-accordion">')
      temp.push(this.build(navbarData))
      temp.push('</ul>')
      this.silde = temp.join("")
    },
    methods: {
      build(data) {
        let list = []
        data.forEach((I, i) => {
          list.push('<li>')

          if (!!I.path) {
            list.push('<a href="#' + I.path + '">')
            list.push(I.name)
            list.push('</a>')
          } else {
            list.push('<a class="item" href="javascript:;">')
            list.push(I.name)
            list.push('</a>')
          }

          if (I.children && I.children.length > 0) {
            list.push('<ul class="hidden-ul" style="display: block;">')
            list.push(this.build(I.children))
            list.push('</ul>')
          }
          list.push('</li>')
        })
        return list.join("")
      }
    }
}
</script>
<style lang="less">
.slidebar {
  /*background-color: #263238;*/
  position: relative;
  display: table-cell;
  vertical-align: top;
  width: 260px;
  padding-top: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  a {
    text-decoration: none;
  }
}

.navigation {
  margin: 0;
  padding: 10px 0;
  position: relative;
  padding-left: 50px;
}

.navigation li {
  position: relative;
  list-style: none;

  .item{
    font-weight: 800;
    font-size: 18px;
  }
}

.navigation li .hidden-ul {
  padding-left: 25px;
}

.navigation li a {
  color: #5e6d82;
  font-size: 16px;
  display: block;
  -webkit-transition: background 0.15s linear, color 0.15s linear;
  -o-transition: background 0.15s linear, color 0.15s linear;
  transition: background 0.15s linear, color 0.15s linear;
  display: block;
  height: 40px;
  line-height: 40px;
  
  padding-left: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
