<template lang="pug">
  .sidebar-wrapper.h-full.rounded.px-2.py-6.flex.flex-col
    .menu-item.text-base.px-4.py-3.rounded.cursor-pointer(
      v-for="item in menuItem",
      :key="item.id",
      :id="item.id",
      @click="selectItem(item)",
      :class="{'menu-item-active': item.component === modelValue}"
    ) {{item.title}}
</template>

<script>
import { v_model } from "@/shared/mixins/v-model";
import { baseInfoMenu } from "@/pages/newMedicalCard/utils/medicalConfig.js";
export default {
  name: "MedicalSidebar",
  mixins: [v_model],
  data() {
    return {
      menuItem: baseInfoMenu,
    };
  },
  methods: {
    selectItem(item) {
      this.value = item?.component;
    },
  },
};
</script>
<style lang="sass" scoped>
.sidebar-wrapper
  width: 16.3%
  background-color: var(--default-white)
.menu-item
  color: var(--font-grey-color)
.menu-item-active, .menu-item:hover
  color: var(--btn-blue-color)
  background-color: var(--bg-ligth-blue-color)
</style>
