[WIP] Add events, buttons and teammates

src/pages/calendar/TheCalendar.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .calendar-container.flex
-    calendar-sidebar
+  .calendar-container.flex(:style="{ width: `calc(100% - ${currentWidth})` }")
+    calendar-sidebar(@width='changeWidth' :team="team")
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
@@ -15,11 +15,13 @@
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
 import CalendarSidebar from "./components/CalendarSidebar.vue";
+import img from "../../assets/images/team-member.svg";
 export default {
   name: "TheCalendar",
   components: { CalendarSchedule, CalendarSidebar },
   data() {
     return {
+      currentWidth: "152px",
       calendarLayout: "",
       currentDate: moment(),
       timeInformation: {
@@ -35,6 +37,12 @@ export default {
           "Зайцев В.С.",
         ],
       },
+      team: [
+        { id: 1, name: "Захарова А.О.", avatar: img },
+        { id: 2, name: "Константинопольская Ю.В.", avatar: img },
+        { id: 3, name: "Коломойцев И.К.", avatar: img },
+        { id: 4, name: "Зайцев В.С.", avatar: img },
+      ],
     };
   },
   methods: {
@@ -55,14 +63,12 @@ export default {
         .then((res) => res.json())
         .then((res) => this.saveEventsData(res));
     },
+    changeWidth(value) {
+      this.currentWidth = value.width;
+    },
   },
   mounted() {
     this.fetchEventsData();
   },
 };
 </script>
-
-<style lang="sass" scoped>
-.calendar-container
-  width: calc(100% - 80px)
-</style>

src/pages/calendar/components/CalendarSidebar.vue

@@ -1,15 +1,60 @@
 <template lang="pug">
   .sidebar.flex.flex-col.bg-white
-    .sidebar-wrapper.h-full
-      .sidebar-content.items-center
+    .sidebar-wrapper.h-full.my-13px
+      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
         base-button-plus
+        .flex.flex-col.items-center
+          base-button-plus(:class="buttonStyled")
+          .flex.flex-col.gap-y-2.items-center.mt-4
+            .event.flex.items-center.justify-center(v-for="event in events" :key="event.id")
+              .event-type(:style="{ background: event.color }")
+        .flex.flex-col.items-center.gap-y-2.justify-center
+          base-button-plus.mb-2(:class="buttonStyled")
+          .team-card(v-for="teammate in team" :key="teammate.id")
+            img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
+        base-open-button.mt-148px(@click="changeSize" :style="{ transform: `rotate(${turnButton})` }")
 </template>
 
 <script>
 import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
+import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
 export default {
   components: {
     BaseButtonPlus,
+    BaseOpenButton,
+  },
+  props: {
+    team: Array,
+  },
+  data() {
+    return {
+      events: [
+        { id: 1, color: "var(--bg-event-meeting-color)" },
+        { id: 2, color: "var(--bg-event-planning-color)" },
+        { id: 3, color: "var(--bg-event-interview-color)" },
+        { id: 4, color: "var(--bg-event-work-color)" },
+      ],
+      widthSidebarOpen: "152px",
+      widthSidebarClose: "312px",
+      isOpen: false,
+      turnButton: "180deg",
+    };
+  },
+  computed: {
+    buttonStyled() {
+      return {
+        "button-styled": true,
+      };
+    },
+  },
+  methods: {
+    changeSize() {
+      this.isOpen = !this.isOpen;
+      this.$emit("width", {
+        width: this.isOpen ? this.widthSidebarClose : this.widthSidebarOpen,
+      });
+      this.turnButton = this.isOpen ? "0deg" : "180deg";
+    },
   },
 };
 </script>
@@ -18,14 +63,34 @@ export default {
 .sidebar
   width: 72px
 .sidebar-wrapper
-   border-left: 2px solid var(--btn-blue-color-3)
-   margin: 13px 0
-.sidebar-content
-  padding: 19px 16px
+  border-left: 2px solid var(--btn-blue-color-3)
 .button-plus
   width: 40px
   height: 40px
   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
+  width: 24px
+  height: 24px
+  max-height: 24px
+  background: var(--btn-blue-color-1)
+  color: var(--btn-blue-color)
+  font-size: 10px
 </style>