[WIP] Добавил анимацию сайдбара

src/pages/newCalendar/TheCalendar.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .w-full.flex.gap-x-2
-    calendar-open-sidebar(v-if="isOpen", :open-sidebar="openSidebar")
-    calendar-sidebar(v-else, :open-sidebar="openSidebar")
+    calendar-open-sidebar(:class="{'close': !isOpen, 'active': isOpen}" :open-sidebar="openSidebar")
+    calendar-sidebar.-ml-2(v-if="!isOpen", :open-sidebar="openSidebar")
     calendar-wrapper
 </template>
 
@@ -27,3 +27,17 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.close
+  opacity: 0
+  width: 0px
+  height: 0
+  transition: opacity 0.2s, width 0.3s
+
+.active
+  opacity: 1
+  width: 232px
+  height: 100%
+  transition: opacity 0.5s, width 0.3s
+</style>

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.gap-y-1
+  .flex.flex-col.gap-y-1
+    .item.flex.flex-col
       .form.flex.items-center.justify-end.py-4.pr-4.rounded-t
         q-btn.rotate-180(
           @click="openSidebar",
@@ -137,9 +138,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.sidebar
-  width: 232px
-
 .form
   background: var(--default-white)
   width: 100%