<script>
import MenuListItem from './MenuList/MenuListItem.vue'

export default {
  name: 'AppContainerMobileMenu',
  components: {
    MenuListItem
  },
  props: {
    currentMenuItem: {
      type: String,
      default: ""
    },
    menuListWithIndex: {
      type: Array,
      default: () => []
    },
    toggleMobileMenu: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {}
  },
  methods: {
    randomkey() {
      return Math.random().toString(36).slice(4)
    },
  }
}

</script>


<template>
  <div class="mobile-menu--active appear-opacity-200 mobile-menu md:hidden">
    <span
      class="absolute top-[30px] right-0 z-40"
      @click="toggleMobileMenu()"
    >
      <i
        icon="x-circle"
        class="w-8 h-8 text-white transform -rotate-90"
      />
    </span>
    <div class="scrollable slide-left-400">
      <ul class=" scrollable__content py-2">
        <MenuListItem
          v-for="{index, ...menuItem} in menuListWithIndex"
          :key="randomkey(index)"
          baseClass="menu"
          :type="menuItem.type"
          :menuItem="menuItem"
          :currentMenuItem="currentMenuItem"
        />
      </ul>
    </div>
  </div>
</template>
