<template>
  <div class="menuContainer">
      <div v-for="item of menu" :key="item">
        <sub-menu :menu="item"></sub-menu>
      </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import SubMenu from "./subMenu";

export default {
  name: "menuSide",
  provide(){
    return{
      menuWrap: this
    }
  },
  components: {SubMenu},
  data(){
    return{
      activeName: "",
      openMenuName: "",
    }
  },
  computed: {
    ...mapGetters(["website", "menu", "tag", "keyCollapse", "screen", "menuId"]),
  },
  methods: {
    handleMenu(item){
      this.activeName = item.name;
      this.$router.push({path: '/community/agency'});
    },
  },
  mounted() {
    console.log(this.menu);
    if(this.menu.length!=0){
      this.activeName = this.menu[0].name;
      console.log(this.activeName)
    }
  },
}
</script>

<style scoped>
  .menuContainer{
    margin-top: 10px;
    height: 98%;
    width: 15%;
    flex-direction: column;
    overflow-y: scroll;
  }


</style>
