<!-- eslint-disable vue/prop-name-casing -->
<script>
import MenuListItem from './MenuListItem.vue'

export default {
  name: 'MenuList',
  components: {MenuListItem},
  props: {
    menuListWithIndex: {
      type: [{
        type: String,
        default: null
      }],
      default: () => []
    },
    isShowMenu: {
      type: Boolean,
      default: false
    },
    routeName: {
      type: String,
      required: true
    }
  },
  data() {
    return {

    }
  },
  methods: {
    randomkey() {
      return Math.random().toString(36).slice(4)
    }
  }
}

</script>


<template>
  <nav class="side-nav">
    <ul>
      <MenuListItem
        v-for="{index, ...menuItem} in menuListWithIndex"
        :id="`main_menu_item_component_${index}`"
        :key="randomkey(index)"
        baseClass="side-menu"
        :type="menuItem.type"
        :menuItem="menuItem"
        :routeName="routeName"
      />
    </ul>
  </nav>
</template>
