Фикс стилей

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -11,10 +11,12 @@
     .button.flex
       base-button(width="40px", @click="createForm")
         q-icon(name="app:plus", size="12px")
-    .button.flex.relative.btn-sidebar.button-svg.cursor-pointer(v-for="svg in patientData.arrSvg")
+    .button.flex.relative.btn-sidebar.button-svg.cursor-pointer(
+      @click="()=>showActive(svg.name)",
+      v-for="svg in patientData.arrSvg"
+    )
       q-btn(
         :class="{'active-btn': findActiveBtn(svg.name)}",
-        @click="()=>showActive(svg.name)",
         dense,
         style="borderRadius: 50%",
         :padding="svg.name === 'group' ? '10.5px 7.5px' : '4px'"
@@ -149,7 +151,7 @@ export default {
   },
   computed: {
     allLeave() {
-      return this.patientData.arrSvg.find((e) => e.active)?.active
+      return this.patientData.arrSvg.find(({ active }) => active)?.active
         ? false
         : true;
     },
@@ -164,8 +166,8 @@ export default {
     },
   },
   methods: {
-    findActiveBtn(name) {
-      return this.patientData.arrSvg.find((e) => e.name === name)?.active
+    findActiveBtn(value) {
+      return this.patientData.arrSvg.find(({ name }) => name === value)?.active
         ? true
         : false;
     },
@@ -252,7 +254,8 @@ export default {
 .btn-sidebar
   &:hover
     & .separator
-      display: flex
+      transition: 0.1s
+      opacity: 1
 
 .status-wrapper
   width: 232px
@@ -304,7 +307,8 @@ export default {
   padding-left: 6px
 
 .separator
-  display: none
+  transition: 0.1s
+  opacity: 0
   z-index: 6
   align-items: center
   left: 72px