<template>
    <ion-menu-toggle :menu="menuId">
      <ion-item class="loc-item" :dynClass="isActive ? 'active' : ''" @click="$emit('recoClick', menuItem.routeName)">
        <ion-icon :name="menuItem.icon" size="small" slot="start"></ion-icon>
        <ion-label>{{menuItem.title}}</ion-label>
      </ion-item>
    </ion-menu-toggle>
</template>

<script lang="ts">
export default {
  props: {
    menuId: {
      type: String,
    },
    menuItem: {
      type: Object,
      default() { 
        return {title: 'Home', routeName: 'home', icon: 'home'};
      },
    },
    isActive: {
      type: Boolean,
    },
  },
}
</script>

<style scoped lang="css">
  .loc-item {
    --padding-top: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--reco-light-font-color);
  }
  .loc-item[dynClass~=active] {
    color: var(--ion-color-primary);
  }
</style>
