<template>
  <div class="main">
    <div class="menu-box">
      <router-link class="btn-menu" v-for="item in cmps" :key="item.name" active-class="btn-active" :to="item.path">
        {{ item.meta && item.meta.title || item.name }}
      </router-link>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cmps: []
    }
  },
  created() {
    this.cmps = this.$router.options.routes[0].children
  }
}
</script>

<style scoped>
.main .menu-box {
  display: flex;
  overflow-y: auto;
  padding: 10px 5px;
  background-color: #333;
}

.main .menu-box::-webkit-scrollbar {
  display: none;
}

.main .menu-box .btn-menu {
  flex-shrink: 0;
  display: block;
  margin: 0 4px;
  padding: 5px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s;
}

.main .menu-box .btn-menu:last-child {
  border-bottom: none;
}

.main .menu-box .btn-menu.btn-active {
  background-color: #fd6800;
  font-weight: bold;
}

.main .content {
  overflow: hidden;
  background-color: beige;
}
</style>