From 208c795cbc26c2fd0a20cf36b4c432f3daf0cb5f Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Tue, 6 Jun 2023 16:50:51 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=A4=D0=B8=D0=BA=D1=81=20=D0=B0=D0=B4?=
 =?UTF-8?q?=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CalendarOpenSidebar.vue        | 42 +++++++++++++------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/pages/newCalendar/components/CalendarOpenSidebar.vue b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
index 11f380c..1046ee7 100644
--- a/src/pages/newCalendar/components/CalendarOpenSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-1
+  .sidebar-wrapper.flex.flex-col.gap-y-1
     .form.flex.items-center.justify-end.py-4.pr-4.rounded-t
       q-btn.rotate-180(
         @click="openSidebar",
@@ -98,13 +98,17 @@ export default {
   methods: {
     choiceState() {
       let num = 0;
+      let isPrimary = false;
       this.patientList.forEach((e) => {
         if (e.choice) num += 1;
+        if (e.choice && e.id === 1) isPrimary = true;
       });
       return {
-        one: num === 1,
-        two: num === 2,
-        three: num === 3,
+        "primary-form": num === 2 && isPrimary,
+        "one-form": num === 1,
+        "two-form": num === 2,
+        "all-form": num === 3,
+        default: !num,
       };
     },
     choiceForm(choice, idx) {
@@ -154,14 +158,8 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.one
-  max-height: calc(100vh - 394px)
-
-.two
-  max-height: calc(100vh - 498px)
-
-.three
-  max-height: calc(100vh - 632px)
+.sidebar-wrapper
+  width: 232px
 
 .form
   background: var(--default-white)
@@ -236,4 +234,24 @@ export default {
   border-bottom: 1px solid var(--bg-light-grey)
   &:first-child
     border-top: 1px solid var(--bg-light-grey)
+
+.one-form
+  max-height: calc(100vh - 394px)
+  transition: all 0.2s ease-in
+
+.two-form
+  max-height: calc(100vh - 528px)
+  transition: all 0.2s ease-in
+
+.all-form
+  max-height: calc(100vh - 632px)
+  transition: all 0.2s ease-in
+
+.primary-form
+  max-height: calc(100vh - 498px)
+  transition: all 0.2s ease-in
+
+.default
+  max-height: 0px
+  transition: all 0.5s ease-in
 </style>