<template>
  <div class="app-menu">
    <a-layout-sider
      :trigger="null" collapsible
      v-model="$sketon.isOpenSildeBar"
      
    > 
    <!-- <div  > -->
        <div class="logo">
          <a href="#">
            <img  alt="log" style="width:32px; height:32px;"  :src="$sketon.companyInfo.logoSrc" />
            <h1 style="width: 126px; height: 50px; overflow: hidden; text-overflow: ellipsis;"> 
              {{ $t($sketon.companyInfo.logoShortTitle) }}
            </h1>
          </a> 
        </div>
      <a-menu   class="app-menu--vertical"  mode="inline" :inline-collapsed="$sketon.isOpenSildeBar">
      <template v-for="(item, index) in menus" >
            <a-menu-item  :key="index" v-if=" !item.hideMenu && !item.childrenMenu" >
              <app-link  :to="item">
                <a-icon v-if="item.icon" :type="item.icon" />  
              
                <a-tooltip placement="right" v-if="!$sketon.isOpenSildeBa">
                  <template slot="title">
                    <span > {{  $t(item.title)   }}  </span>
                  </template>
                  <span> {{  $t(item.title)   }}  </span>
                </a-tooltip>
               
              </app-link>
            </a-menu-item>
            <menu-bar-item  v-else :key="index" :menu-info="item " />
      </template>   
      </a-menu>

    </a-layout-sider>
  </div>  

</template>

<script>

import MenuBarItem from "./MenuBarItem.vue";
import AppLink from "./Link.vue"
export default {
  name:"MenuBar",

  components: {
    "menu-bar-item": MenuBarItem,
    AppLink,
  },
  computed: {
    menus() {
      return this.$sketon.menus;
    },
  },
  data() {
    return {};
  },
  methods:{
    changeSildeBarStatus() {
      this.$sketon.isOpenSildeBar = !this.$sketon.isOpenSildeBar
    },
  },
  created() {},
};
</script>
<style lang="scss" >

</style>