<!-- eslint-disable vue/prop-name-casing -->
<script>
import {mapGetters} from 'vuex'
import MenuItem from './MenuItem.vue'

export default {
  name: 'MenuList',
  components: {MenuItem},
  props: {
    current_menu_item: {
      type: String,
      default: ""
    },
    menu_list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      routeName: ""
    }
  },
  computed: {
    ...mapGetters('', ['mobile_menu_opened', 'show_menu']),
    menu_list_with_index() {
      return this.menu_list.map((el, index) => ({...el, index}))
    }
  },
  watch:{
    $route (to){
      this.routeName = to.name;
    }
},
  methods: {
    rkey() {
      return Math.random().toString(36).slice(4)
    }
  }
}

</script>


<template>
  <nav
    x-show="show_menu"
    class="side-nav"
  >
    <ul>
      <MenuItem
        v-for="{index, ...menu_item} in menu_list_with_index"
        :id="`main_menu_item_component_${index}`"
        :key="rkey(index)"
        base_class="side-menu"
        :type="menu_item.type"
        :menu_item="menu_item"
        :current_menu_item="current_menu_item"
        :routeName="routeName"
      />
    </ul>
  </nav>
</template>
