WIP Сделала сайдбар общей информации

src/pages/newMedicalCard/components/MedicalCardSidebar.vue

@@ -0,0 +1,74 @@
+<template lang="pug">
+  .sidebar-wrapper.h-full.rounded.px-2.py-6.flex.flex-col
+    .menu-item.text-base.px-4.py-3.rounded(
+      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";
+export default {
+  name: "MedicalCardSidebar",
+  mixins: [v_model],
+  data() {
+    return {
+      menuItem: [
+        {
+          title: "Основные данные",
+          id: "basic-data",
+          component: "BasicDataForm",
+        },
+        {
+          title: "Протоколы первичного осмотра",
+          id: "protocols",
+          component: "Protocols",
+        },
+        {
+          title: "Доверенное лицо",
+          id: "trusted-person",
+          component: "TrustedPerson",
+        },
+        {
+          title: "Аллергии",
+          id: "allergies",
+          component: "Allergies",
+        },
+        {
+          title: "Состояние здоровья",
+          id: "health-status",
+          component: "HealthStatus",
+        },
+        {
+          title: "История болезней",
+          id: "medical-history",
+          component: "MedicalHistory",
+        },
+        {
+          title: "Зубная формула",
+          id: "dental-formula",
+          component: "DentalFormula",
+        },
+      ],
+    };
+  },
+  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>