Перенес данные в конфиг, фикс стилей

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -11,20 +11,26 @@
     .button.flex    
       q-btn(color="primary", dense, padding="14px", @click="createForm")
         q-icon(name="app:icon-plus", size="12px")
-    .button.flex.relative.btn-sidebar(v-for="svg in arrSvg")
+    .button.flex.relative.btn-sidebar(v-for="svg in patientData.arrSvg")
       q-btn(
         v-click-outside="hideActive",
         @click="()=>clickButton(svg.name)",
         dense,
-        style="color: var(--font-grey-color); borderRadius: 50%", padding="4px"
+        style="color: var(--font-grey-color); borderRadius: 50%",
+        :padding="svg.name === 'group' ? '10.5px 7.5px' : '4px'"
       )
         calendar-sidebar-svg(:name-svg="svg.name", :active="svg.active")
-      .separator.flex.absolute(v-show="!svg.active")
-        .wrapper-mark.flex-col.flex
-          .mark-top.flex
-          .mark-bottom.flex
-        .mark-text.flex {{svg.text}}
-      q-menu(v-if="svg.name === 'round'", anchor="center start", self="top right", :style="{'margin-left': '8px !important'}")
+      .separator.flex.absolute(v-show="allLeave")
+        .sidebar.flex-col.flex
+          .mark-top.flex.w-2.h-2
+          .mark-bottom.flex.w-2.h-2
+        .mark-text.flex.font-medium.text-sm {{svg.text}}
+      q-menu(
+        v-if="svg.name === 'round'",
+        anchor="center start",
+        self="top right",
+        :style="{'margin-left': '8px !important'}"
+      )
         .status-wrapper.flex.flex-col.gap-y-4.p-4
           .font-bold.text-xm {{svg.text}}
           .flex.flex-col.gap-2px
@@ -34,9 +40,14 @@
             )
               img(:src="status.icon")
               span {{status.name}}
-      q-menu(v-if="svg.name === 'medcard'", anchor="center start", self="top right", :style="{'margin-left': '8px !important'}")
+      q-menu(
+        v-if="svg.name === 'medcard'",
+        anchor="center start",
+        self="top right",
+        :style="{'margin-left': '8px !important'}"
+      )
         .fill-wrapper.flex.flex-col.gap-y-4.p-4
-          .font-bold.text-xm Первичная медкарта
+          .font-bold.text-xm {{svg.text}}
           .flex.flex-col.gap-2px
             .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
               v-for="medical in medicalData",
@@ -44,9 +55,14 @@
             )
               img(:src="medical.icon")
               span {{medical.name}}
-      q-menu(v-if="svg.name === 'group'", anchor="center start", self="top right", :style="{'margin-left': '8px !important'}")
+      q-menu(
+        v-if="svg.name === 'group'",
+        anchor="center start",
+        self="top right",
+        :style="{'margin-left': '8px !important'}"
+      )
         .patient-wrapper.flex.flex-col.gap-y-4.px-4.pt-4
-          .font-bold.text-xm Пациенты
+          .font-bold.text-xm {{svg.text}}
           .flex.flex-col.relative(:style="{height: '391px'}")
             .flex.h-8.w-full.items-center.justify-between
               base-input(
@@ -115,21 +131,23 @@ export default {
       foundPerson: "",
       sortData: [],
       sort: false,
-      arrSvg: [
-        { name: "round", text: "Статус приема", active: false },
-        { name: "medcard", text: "Первичная медкарта", active: false },
-        { name: "group", text: "Пациенты", active: false },
-      ],
     };
   },
+  computed: {
+    allLeave() {
+      return this.patientData.arrSvg.find((e) => e.active)?.active
+        ? false
+        : true;
+    },
+  },
   methods: {
     hideActive() {
-      this.arrSvg.forEach((e) => {
+      this.patientData.arrSvg.forEach((e) => {
         if (e.active) e.active = false;
       });
     },
     clickButton(name) {
-      this.arrSvg = this.arrSvg.map((e) => {
+      this.patientData.arrSvg = this.patientData.arrSvg.map((e) => {
         if (e.name === name) return { ...e, active: true };
         return { ...e, active: false };
       });
@@ -239,21 +257,13 @@ export default {
   width: max-content
   height: 32px
 
-.wrapper-mark
-  background: var(--font-dark-blue-color)
-
 .mark-top
-  height: 8px
-  width: 8px
   border-bottom-right-radius: 10px
-  background: #E8E8F3
+  background: var(--bg-body-color)
 
 .mark-bottom
-  background: red
   border-top-right-radius: 10px
-  width: 8px
-  height: 8px
-  background: #E8E8F3
+  background: var(--bg-body-color)
 
 .mark-text
   padding: 8px 12px