WIP Поправила меню и формы

src/pages/schedule/components/ScheduleHeader.vue

@@ -1,12 +1,6 @@
 <template lang="pug">
   .flex.flex-col.gap-y-5
     .flex.justify-center.pl-8.pr-20.font-bold.text-xl Планировщик смен
-    transition(name="form")
-      form-change-shift(
-        v-if="showForm",
-        :close-form="closeForm",
-        :times-shift="timesShift"
-      )
     .flex
       .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
         .flex
@@ -45,8 +39,12 @@
             color="primary",
             no-caps,
             padding="8px 24px",
-            @click="openForm",
           )
+            q-menu(v-model="showForm")
+              form-change-shift(
+                v-model="showForm",
+                :times-shift="timesShift"
+              )
 </template>
 
 <script>
@@ -87,9 +85,6 @@ export default {
     openForm() {
       this.showForm = true;
     },
-    closeForm() {
-      this.showForm = false;
-    },
     previousHandler() {
       this.$emit("switch-previous-month");
     },
@@ -126,25 +121,6 @@ export default {
 .text
   color: var(--font-dark-blue-color)
 
-.form-enter-from
-  opacity: 0
-  transform: translateY(300px)
-  pointer-events: none
-
-.form-enter-active
-  transition: 0.5s ease
-
-.form-leave-to
-  opacity: 0
-  transform: translateY(300px)
-  pointer-events: none
-
-.form-leave-active
-  transition: 0.5s ease
-
-.form-move
-  transition: 0.5s ease
-
 .secondary
   background-color: var(--btn-blue-sec-color)
   border: 1px solid var(--btn-blue-sec-color)