From fa9afb63bb8a627daf284db4e8e3626ded1b578a Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Fri, 21 Oct 2022 21:20:29 +0300
Subject: [PATCH 1/2] [WIP] Add events, buttons and teammates

---
 src/assets/sass/variables.sass                |  5 ++
 .../base/buttons/BaseOpenButton.vue           | 21 +++++
 src/pages/calendar/TheCalendar.vue            | 20 +++--
 .../calendar/components/CalendarSidebar.vue   | 77 +++++++++++++++++--
 tailwind.config.js                            |  5 +-
 5 files changed, 114 insertions(+), 14 deletions(-)
 create mode 100644 src/components/base/buttons/BaseOpenButton.vue

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 6d60274..276ed1a 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -20,3 +20,8 @@
   --btn-red-color: #ff6f6f
   --time-indicator-color: #e93131
   --font-obligatory-color: #ff0000
+  --bg-event-box-color: rgba(37, 40, 80, 0.1)
+  --bg-event-meeting-color: #24D07D
+  --bg-event-planning-color: #E93131
+  --bg-event-interview-color: #E5E931
+  --bg-event-work-color: #3BA3EE
diff --git a/src/components/base/buttons/BaseOpenButton.vue b/src/components/base/buttons/BaseOpenButton.vue
new file mode 100644
index 0000000..7d23935
--- /dev/null
+++ b/src/components/base/buttons/BaseOpenButton.vue
@@ -0,0 +1,21 @@
+<template lang="pug">
+  button.cursor-pointer.icon-long-arrow.open-button.text-xs.pt-1
+</template>
+
+<script>
+export default {
+  name: "OpenButton",
+};
+</script>
+
+<style lang="sass" scoped>
+.open-button
+  outline: none
+  border: none
+  width: 24px
+  height: 24px
+  max-height: 24px
+  color: var(--btn-blue-color)
+  background-color: var(--bg-ligth-blue-color)
+  border-radius: 50%
+</style>
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 63c4728..7b9af0a 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/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>
diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
index 7fc446f..7982ac2 100644
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/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>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9f09c1a..85096a1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -24,10 +24,13 @@ module.exports = {
         43: "43px",
       },
       spacing: {
+        "3px": "3px",
         "6px": "6px",
         "10px": "10px",
-        "3px": "3px",
+        "13px": "13px",
+        "19px": "19px",
         "74px": "74px",
+        "148px": "148px",
       },
     },
   },

From bd1e96a55215cc4083ed660fb015588f53c054e1 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Fri, 21 Oct 2022 21:34:39 +0300
Subject: [PATCH 2/2] [WIP] Add window sidebar

---
 src/pages/calendar/components/CalendarSidebar.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
index 7982ac2..84d5169 100644
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .sidebar.flex.flex-col.bg-white
-    .sidebar-wrapper.h-full.my-13px
+    .sidebar-wrapper.h-full.my-13px(:style="{ width: windowSidebar }")
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
         base-button-plus
         .flex.flex-col.items-center
@@ -38,6 +38,7 @@ export default {
       widthSidebarClose: "312px",
       isOpen: false,
       turnButton: "180deg",
+      windowSidebar: "72px",
     };
   },
   computed: {
@@ -54,14 +55,14 @@ export default {
         width: this.isOpen ? this.widthSidebarClose : this.widthSidebarOpen,
       });
       this.turnButton = this.isOpen ? "0deg" : "180deg";
+      this.windowSidebar = this.isOpen ? "232px" : "72px";
     },
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.sidebar
-  width: 72px
+
 .sidebar-wrapper
   border-left: 2px solid var(--btn-blue-color-3)
 .button-plus