Разделил сайдбар на компоненты

src/components/base/BaseButton.vue

@@ -15,7 +15,7 @@
       span.icon-container(
         :class="rightIcon",
         v-if="rightIcon"
-        :style="{fontSize: iconRightSize + 'px'}"
+        :style="{fontSize: iconRightSize + 'px', marginLeft: marginLeftIcon + 'px'}"
         )
 </template>
 
@@ -50,6 +50,10 @@ export default {
       type: Number,
       default: 24,
     },
+    marginLeftIcon: {
+      type: Number,
+      default: 0,
+    },
   },
 };
 </script>

src/pages/calendar/TheCalendar.vue

@@ -4,6 +4,7 @@
       @width="changeWidth"
       :team-data="employeesData"
       :open-form-create="openFormCreateEvent"
+      :event-type="eventType"
     )
     calendar-schedule(
       :owners-data="employeesData"
@@ -48,6 +49,12 @@ export default {
       employeesData: [],
       isOpenForm: false,
       membersData: [],
+      eventType: [
+        { id: 1, label: "Встреча", color: "var(--bg-event-green-color)" },
+        { id: 2, label: "Планерка", color: "var(--bg-event-red-color)" },
+        { id: 3, label: "Интервью", color: "var(--bg-event-yellow-color)" },
+        { id: 4, label: "Важная работа", color: "var(--bg-event-blue-color)" },
+      ],
     };
   },
   methods: {

src/pages/calendar/components/CalendarSidebar.vue

@@ -1,77 +1,60 @@
 <template lang="pug">
   .sidebar.flex.flex-col.bg-white(:class="openSidebar")
     .sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
-      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-if="!isOpen")
+      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
-        base-button(left-icon="icon-plus", rounded, :size="40", :icon-left-size="10" @click="openFormCreate" )
+        base-button(
-        .flex.flex-col.items-center(v-if="!isOpen")
+          left-icon="icon-plus",
-          base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
+          rounded,
-          .flex.flex-col.gap-y-2.items-center.mt-4
+          :size="40",
-            .event.flex.items-center.justify-center(v-for="event in events" :key="event.id")
+          :icon-left-size="10",
-              .event-type(:style="{ background: event.color }")
+          @click="openFormCreate",
-        .flex.flex-col.items-center.gap-y-2.justify-center
+          v-if="!isOpen"
-          base-button.mb-2(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
+        )
-          .team-card(v-for="teammate in teamData" :key="teammate.id")
+        base-button.w-full(
-            base-avatar(:size="32" :color="teammate.color")
+          right-icon="icon-plus",
-              img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar")
+          split,
-              span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}}
+          :size="40",
-      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-else)
+          :icon-right-size="10",
-        base-button(right-icon="icon-plus", split, :size="40", :icon-right-size="10", @click="openFormCreate" ) Создать событие
+          :marginLeftIcon="7",
-        .flex.items-center.flex-col.gap-y-4
+          @click="openFormCreate",
-          .events-wrapper.flex.items-center.justify-between
+          v-else
-            .flex {{ "Виды событий" }}
+        ) Создать событие
-            base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
+        calendar-sidebar-event(:is-open="isOpen", :event-type="eventType")
-          .flex.flex-col.gap-y-2
+        calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen")
-            .relative.flex.items-center.gap-x-3.h-8(v-for="event in events")
-              input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(
-                :placeholder="event.name"
-                :key="event.id")
-              .event-type(:style="{ background: event.color }")
-              span.icon-edit.cursor-pointer
-        .flex.flex-col.gap-y-4
-          .events-wrapper.flex.items-center.justify-between
-            .flex {{ "Команды" }}
-            base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
-          .box-team.flex.flex-col.gap-y-2
-            .team-card.flex.items-center.justify-between.cursor-pointer(
-              v-for="teammate in teamData"
-              :key="teammate.id")
-              .flex.items-center
-                base-avatar(:size="32" :color="teammate.color")
-                  img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar")
-                  span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}}
-                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
-              span.icon-change-place.cursor-pointer.w-5.flex.items-center.justify-center.w-6.h-6
       .button-wrapper.flex.justify-center.mb-23px
-        base-button(left-icon="icon-long-arrow", rounded, :size="40", :icon-left-size="18", secondary, :style="{ transform: `rotate(${turnButton})`}", @click="changeSize")
+        base-button(
+          left-icon="icon-long-arrow",
+          rounded, :size="40",
+          :icon-left-size="18",
+          secondary,
+          :style="{ transform: `rotate(${turnButton})`}",
+          @click="changeSize"
+        )
 </template>
 
 <script>
 import BaseButton from "@/components/base/BaseButton";
-import BaseAvatar from "@/components/base/BaseAvatar";
+import CalendarSidebarEvent from "./cells/CalendarSidebarEvent.vue";
+import CalendarSidebarTeammate from "./cells/CalendarSidebarTeammate.vue";
 
 export default {
   name: "CalendarSidebar",
   components: {
     BaseButton,
-    BaseAvatar,
+    CalendarSidebarEvent,
+    CalendarSidebarTeammate,
   },
   props: {
     teamData: Array,
     openFormCreate: Function,
+    eventType: Array,
   },
   data() {
     return {
-      events: [
-        { id: 1, name: "Встреча", color: "var(--bg-event-green-color)" },
-        { id: 2, name: "Планерка", color: "var(--bg-event-red-color)" },
-        { id: 3, name: "Интервью", color: "var(--bg-event-yellow-color)" },
-        { id: 4, name: "Важная работа", color: "var(--bg-event-blue-color)" },
-      ],
       widthSidebarOpen: "232px",
       widthSidebarClose: "72px",
       isOpen: false,
       turnButton: "180deg",
-      maxLengthLastName: 13,
     };
   },
   computed: {
@@ -80,11 +63,6 @@ export default {
         "open-sidebar": this.isOpen,
       };
     },
-    buttonStyled() {
-      return {
-        "button-styled": true,
-      };
-    },
     sidebarWidth() {
       if (this.isOpen) {
         return {
@@ -95,9 +73,6 @@ export default {
         width: this.widthSidebarClose,
       };
     },
-    defaultName(last, first) {
-      return `${last[0]}${first[0]}`;
-    },
   },
   methods: {
     changeSize() {
@@ -108,16 +83,6 @@ export default {
       );
       this.turnButton = this.isOpen ? "0deg" : "180deg";
     },
-    changeName(lastName, fitstName, patronymic) {
-      return lastName.length > this.maxLengthLastName
-        ? lastName.slice(0, this.maxLengthLastName) +
-            "... " +
-            fitstName[0] +
-            "." +
-            patronymic[0] +
-            "."
-        : lastName + " " + fitstName[0] + "." + patronymic[0] + ".";
-    },
   },
 };
 </script>
@@ -126,83 +91,16 @@ export default {
 .sidebar-wrapper
   border-left: 2px solid var(--btn-blue-color-3)
 
-.button-plus
-  max-height: 40px
-  background: var(--btn-blue-color)
-  color: var(--default-white)
-
-.event
-  width: 32px
-  height: 32px
-  background: var(--bg-event-box-color)
-  border-radius: 4px
-
-.event-type
-  width: 16px
-  height: 16px
-  border-radius: 2px
-
-.avatar-wrapper
-  width: 32px
-  height: 32px
-
-.open-button
-  width: 40px
-  height: 40px
-  max-height: 40px
-
-.button-styled
-  max-height: 24px
-  background: var(--btn-blue-color-1)
-  color: var(--btn-blue-color)
-
 .open-sidebar
   .sidebar-content
-    align-items: flex-end
+    display: flex
-    padding-left: 15px
+    flex-direction: column
-  .event-type
+    row-gap: 32px
-    position: absolute
+    padding: 19px 16px
-    width: 8px
+    align-items: center
-    height: 16px
+    width: 232px
-    top: 8px
+
-    left: 8px
   .button-wrapper
     justify-content: end
     padding-right: 16px
-
-.create-event
-  width: 200px
-  height: 40px
-  border-radius: 4px
-
-.events-wrapper
-  width: 200px
-
-.input-wrapper
-  border: none
-  background: var(--bg-event-box-color)
-  height: 32px
-  width: 169px
-
-.team-card
-  border-radius: 16px
-  &:hover
-    background: var(--font-dark-blue-color)
-    color: var(--default-white)
-
-.button
-  width: 200px
-
-.custom-input
-  border-radius: 4px
-  width: 169px
-  outline: none
-  background-color: var(--bg-event-box-color)
-  &::placeholder
-    color: var(--font-dark-blue-color)
-  &:focus
-    background-color: var(--font-dark-blue-color)
-    color: var(--default-white)
-    &::placeholder
-      color: var(--default-white)
 </style>

src/pages/calendar/components/cells/CalendarSidebarEvent.vue

@@ -0,0 +1,76 @@
+<template lang="pug">
+  .flex.flex-col.items-center.w-full
+    .flex.flex-col.items-center(v-if="!isOpen")
+      base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary)
+      .flex.flex-col.gap-y-2.items-center.mt-4
+        .event.flex.items-center.justify-center(v-for="event in eventType" :key="event.id")
+          .event-type(:style="{ background: event.color }")
+    .flex.flex-col.gap-y-4.w-full(v-else)
+      .flex.items-center.justify-between
+        .flex.text-base.font-bold(:style="{ color: 'var(--font-dark-blue-color)' }") Виды событий
+        base-button(
+          v-if="isOpen",
+          left-icon="icon-plus",
+          rounded, :size="24",
+          :icon-left-size="10",
+          secondary
+        )
+      .flex.flex-col.gap-y-2
+        .relative.flex.items-center.gap-x-3.h-8(v-for="event in eventType")
+          input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(
+            :placeholder="event.label"
+            :key="event.id"
+          )
+          .event-open(:style="{ background: event.color }")
+          span.icon-edit.cursor-pointer
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton";
+export default {
+  name: "CalendarSidebarEvent",
+  components: {
+    BaseButton,
+  },
+  props: {
+    isOpen: Boolean,
+    eventType: Array,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.event
+  width: 32px
+  height: 32px
+  background: var(--bg-event-box-color)
+  border-radius: 4px
+
+.event-type
+  width: 16px
+  height: 16px
+  border-radius: 2px
+
+.custom-input
+  padding-top: 9px
+  padding-left: 24px
+  border: none
+  border-radius: 4px
+  width: 169px
+  outline: none
+  background-color: var(--bg-event-box-color)
+  &::placeholder
+    color: var(--font-dark-blue-color)
+  &:focus
+    background-color: var(--font-dark-blue-color)
+    color: var(--default-white)
+    &::placeholder
+      color: var(--default-white)
+
+.event-open
+  position: absolute
+  width: 8px
+  height: 16px
+  top: 8px
+  left: 8px
+</style>

src/pages/calendar/components/cells/CalendarSidebarTeammate.vue

@@ -0,0 +1,64 @@
+<template lang="pug">
+  .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
+    base-button.mb-2(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary)
+    .team-card(v-for="teammate in teamData" :key="teammate.id")
+      base-avatar(:size="32", :color="teammate.color")
+        img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar")
+        span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}}
+  .flex.flex-col.gap-y-4.w-full(v-else, :style="{ color: 'var(--font-dark-blue-color)' }")
+    .flex.items-center.justify-between
+      .flex.text-base.font-bold Команды
+      base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary)
+    .box-team.flex.flex-col.gap-y-2
+      .team-card.flex.items-center.justify-between.cursor-pointer(
+        v-for="teammate in teamData"
+        :key="teammate.id"
+        )
+        .flex.items-center
+          base-avatar(:size="32" :color="teammate.color")
+            img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar")
+            span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}}
+          .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
+        span.icon-change-place.cursor-pointer.w-5.flex.items-center.justify-center.w-6.h-6
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton";
+import BaseAvatar from "@/components/base/BaseAvatar";
+export default {
+  name: "CalendarSidebarTeammate",
+  props: {
+    teamData: Array,
+    isOpen: Boolean,
+  },
+  components: {
+    BaseButton,
+    BaseAvatar,
+  },
+  data() {
+    return {
+      maxLengthLastName: 13,
+    };
+  },
+  methods: {
+    changeName(lastName, fitstName, patronymic) {
+      return lastName.length > this.maxLengthLastName
+        ? lastName.slice(0, this.maxLengthLastName) +
+            "... " +
+            fitstName[0] +
+            "." +
+            patronymic[0] +
+            "."
+        : lastName + " " + fitstName[0] + "." + patronymic[0] + ".";
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.team-card
+  border-radius: 16px
+  &:hover
+    background: var(--font-dark-blue-color)
+    color: var(--default-white)
+</style>