<template lang="pug">
  .base-info-wrapper.w-full.flex.gap-x-2
    medical-sidebar(v-model="currentMenuItem")
    component(
      v-if="currentMenuItem",
      v-bind:is="currentMenuItem"
    )
</template>

<script>
import MedicalSidebar from "@/pages/newMedicalCard/components/MedicalSidebar.vue";
import MedicalBasicDataWrapper from "@/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue";
import MedicalAllergiesWrapper from "@/pages/newMedicalCard/components/MedicalAllergiesWrapper.vue";
import MedicalConfidantWrapper from "@/pages/newMedicalCard/components/MedicalConfidantWrapper.vue";
import MedicalProtocolsWrapper from "@/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue";
export default {
  name: "MedicalBaseInfo",
  components: {
    MedicalSidebar,
    MedicalBasicDataWrapper,
    MedicalAllergiesWrapper,
    MedicalConfidantWrapper,
    MedicalProtocolsWrapper,
  },
  data() {
    return {
      currentMenuItem: "MedicalBasicDataWrapper",
    };
  },
};
</script>
<style lang="sass" scoped>
.base-info-wrapper
  height: 79.7%
  max-height: calc(100% - 190px - 16px)
</style>
