<template lang="pug">
    .sidebar-item(@click='clickItem()')
      i(class='fa',':class'="icon")
      br
      span {{name}}
</template>
<script>
export default {
  name: 'sidebarItem',
  data () {
    return {}
  },
  props: ['icon', 'link', 'type', 'id', 'sort', 'name', 'pid', 'grade'],
  methods: {
    clickItem () {
      console.log('this is sidebar item %o', this)
      if (this.link) {
        this.$router.push({
          path: `${this.link}`
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.sidebar-item {
  display: block;
  color: #fff;
  /* text-align center */
  font-weight: 400;
  font-size: 10px;
  padding: 10px 5px;

  i {
    margin-bottom: 5px;
  }
}

.fa {
  font-size: 25px;
}
</style>
