<script>
export default {
  name: "appsNav",
  props: {
    width: {default: "200px"}
  },
  data() {
    return {
      menu: []
    }
  },
  created() {
    this.menu = localStorage.getItem('routes') ? JSON.parse(localStorage.getItem('routes')) : []
  }
}
</script>

<template>
  <div class="appsNav" :style="{width}">
    <img src="../assets/logo.svg" class="logo"/>
    <div class="item pointer" v-for="item in menu" :key="item.name" v-text="item.label" @click="$router.push({name: item.name})"/>
  </div>
</template>
<style scoped>
.appsNav {
  flex-shrink: 0;
  height: 100vh;
  background: #f3f6f9;
}

.item {
  line-height: 32px;
  border-top: 1px solid #ddd;
  font-size: 14px;
  font-weight: bold;
  user-select: none;
  padding: 0 16px;
}

.item:hover {
  opacity: .8;
}

.logo {
  width: 40px;
  height: 40px;
  margin: 10px calc(50% - 20px);
}
</style>
