<template>
    <div style="height:100%;width: 15%" >
      <el-scrollbar style="height:94%;width: 94%;padding: 3%">
        <div v-if="validatenull(menu)"
             class="avue-sidebar--tip">{{$t('menuTip')}}
        </div>
        <el-menu unique-opened
                 :default-active="nowTagValue"
                 mode="vertical"
                 :show-timeout="200"
                 :collapse="keyCollapse">
          <sidebar-item :menu="menu"
                        :screen="screen"
                        :props="website.menu.props"
                        :collapse="keyCollapse"></sidebar-item>
        </el-menu>
      </el-scrollbar>
    </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import logo from "../logo";
  import sidebarItem from "./sidebarItem";
  import {validatenull} from '../../../util/validate';
  export default {
    name: "sidebar",
    components: {sidebarItem, logo},
    inject: ["index"],
    data() {
      return {};
    },
    created() {

    },
    computed: {
      ...mapGetters(["website", "menu", "tag", "keyCollapse", "screen", "menuId"]),
      nowTagValue: function () {
      }
    },
    mounted() {
    },
    methods: {
    }
  };
</script>
<style lang="scss" scoped>

 .avue-sidebar {
    width: 15%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    padding: 0px;
    height: 100%;
    position: relative;
    background-color: transparent;
    transition: width .2s;
    box-sizing: border-box;
  }
 .el-menu {
   border-right: none;
   list-style: none;
   position: relative;
   margin: 0;
   padding-left: 0;
   background-color: transparent;
 }
</style>

