<script>
import MenuItem from './MenuItem.vue'

export default {
  name: 'MobileMenu',
  components: {
    MenuItem
  },
  props: {
    // eslint-disable-next-line vue/prop-name-casing
    current_menu_item: {
      type: String,
      default: ""
    },
    // eslint-disable-next-line vue/prop-name-casing
    menu_list: {
      type: Array,
      default: () => []
    }
  },
  data() {
  },
  computed: {
    menu_list_with_index() {
      return this.menu_list.map((el, index) => ({...el, index}))
    }
  },
  methods: {
    rkey() {
      return Math.random().toString(36).slice(4)
    }
  }
}

</script>


<template>
  <div x-bind:class="mobile_menu_opened ? 'mobile-menu--active mobile-menu md:hidden' : 'mobile-menu md:hidden'">
    <div class="scrollable">
      <span
        class="mobile-menu-toggler"
        @click="mobile_menu_opened = !mobile_menu_opened"
      >
        <i
          icon="x-circle"
          class="w-8 h-8 text-white transform -rotate-90"
        />
      </span>
      <ul class="scrollable__content py-2">
        <MenuItem
          v-for="{index, ...menu_item} in menu_list_with_index"
          :id="`main_menu_item_component_${index}`"
          :key="rkey(index)"
          base_class="menu"
          :type="menu_item.type"
          :menu_item="menu_item"
          :current_menu_item="current_menu_item"
        />
      </ul>
    </div>
  </div>
</template>
