[WIP] Добавил фокус и отображение форм сайдбара

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -11,12 +11,22 @@
     .button.flex    
       q-btn(color="primary", dense, padding="14px", @click="createForm")
         q-icon(name="app:icon-plus", size="12px")
-    .button.flex.relative
-      q-btn(dense, style="color: var(--font-grey-color); borderRadius: 50%", padding="4px")
-        img(:src="round")
-      q-menu(anchor="center start" self="top right" :style="{'margin-left': '8px !important'}")
+    .button.flex.relative.btn-sidebar(v-for="svg in arrSvg")
+      q-btn(
+        v-click-outside="hideActive",
+        @click="()=>clickButton(svg.name)",
+        dense,
+        style="color: var(--font-grey-color); borderRadius: 50%", padding="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'}")
         .status-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="status in patientData.statuses",
@@ -24,10 +34,7 @@
             )
               img(:src="status.icon")
               span {{status.name}}
-    .button.flex
-      q-btn(dense, style="color: var(--font-grey-color); borderRadius: 50%", padding="4px")
-        img(:src="medcard")
-      q-menu(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 Первичная медкарта
           .flex.flex-col.gap-2px
@@ -37,10 +44,7 @@
             )
               img(:src="medical.icon")
               span {{medical.name}}
-    .button.flex.rounded-b
-      q-btn(dense, style="color: var(--font-grey-color); borderRadius: 50%", padding="10.5px 7.5px")
-        img(:src="group")
-      q-menu(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 Пациенты
           .flex.flex-col.relative(:style="{height: '391px'}")
@@ -88,25 +92,20 @@
 
 <script>
 import arrow from "@/assets/icons/double_left_arrow.svg";
-import group from "@/assets/icons/person_group.svg";
-import medcard from "@/assets/icons/medcard.svg";
-import round from "@/assets/icons/status_round.svg";
 import icon_ok from "@/assets/icons/icon_ok.svg";
 import sort_word from "@/assets/icons/sort_word.svg";
 import BaseInput from "@/components/base/BaseInput.vue";
 import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
+import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
 
 export default {
   name: "CalendarSidebar",
   props: { openSidebar: Function, createForm: Function },
-  components: { BaseInput },
+  components: { BaseInput, CalendarSidebarSvg },
   data() {
     return {
       arrow,
-      group,
-      medcard,
-      round,
       icon_ok,
       sort_word,
       patientData: patientData,
@@ -116,9 +115,25 @@ export default {
       foundPerson: "",
       sortData: [],
       sort: false,
+      arrSvg: [
+        { name: "round", text: "Статус приема", active: false },
+        { name: "medcard", text: "Первичная медкарта", active: false },
+        { name: "group", text: "Пациенты", active: false },
+      ],
     };
   },
   methods: {
+    hideActive() {
+      this.arrSvg.forEach((e) => {
+        if (e.active) e.active = false;
+      });
+    },
+    clickButton(name) {
+      this.arrSvg = this.arrSvg.map((e) => {
+        if (e.name === name) return { ...e, active: true };
+        return { ...e, active: false };
+      });
+    },
     trimOwnerName(lastName, firstName, patronymic) {
       let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
       let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
@@ -169,6 +184,11 @@ export default {
   align-items: center
   justify-content: center
 
+.btn-sidebar
+  &:hover
+    & .separator
+      display: flex
+
 .status-wrapper
   width: 232px
   height: 188px
@@ -211,6 +231,41 @@ export default {
   .q-field__prepend
     height: 32px
 
+.separator
+  display: none
+  z-index: 6
+  align-items: center
+  left: 72px
+  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
+
+.mark-bottom
+  background: red
+  border-top-right-radius: 10px
+  width: 8px
+  height: 8px
+  background: #E8E8F3
+
+.mark-text
+  padding: 8px 12px
+  background: var(--font-dark-blue-color)
+  border-radius: 4px
+  color: var(--default-white)
+
+.q-btn
+  transition: color 0.3s cubic-bezier(0.25,0.8,0.5,1), background-color 0.3s cubic-bezier(0.25,0.8,0.5,1)
+  &:hover
+    background: var(--bg-light-blue-color)
+
 .gradient
   width: 232px
   height: 44px