[WIP] Change colors, add name component and change width

src/assets/sass/variables.sass

@@ -21,10 +21,10 @@
   --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
+  --bg-event-green-color: #24d07d
+  --bg-event-red-color: #e93131
+  --bg-event-yellow-color: #e5e931
+  --bg-event-blue-color: #3ba3ee
   --light-grey-bg-color: #f8f9fa
   --btn-green-color: rgba(60, 217, 75, 1)
   --btn-light-green-color: rgba(60, 217, 75, 0.2)

src/pages/calendar/TheCalendar.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .calendar-container.flex(:style="{ width: `calc(100% - ${currentWidth})` }")
-    calendar-sidebar(@width='changeWidth' :team="team")
+  .calendar-container.flex
+    calendar-sidebar(@width="changeWidth" :team="team")
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
@@ -56,7 +56,7 @@ export default {
         .then((res) => this.saveEventsData(res));
     },
     changeWidth(value) {
-      this.currentWidth = value.width;
+      this.currentWidth = value;
     },
   },
   mounted() {

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(:style="{ width: windowSidebar }")
+    .sidebar-wrapper.h-full.my-13px(:style="sidebarWidth")
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
         base-button-plus
         .flex.flex-col.items-center
@@ -19,6 +19,7 @@
 import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
 import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
 export default {
+  name: "CalendarSidebar",
   components: {
     BaseButtonPlus,
     BaseOpenButton,
@@ -29,16 +30,15 @@ export default {
   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)" },
+        { id: 1, color: "var(--bg-event-green-color)" },
+        { id: 2, color: "var(--bg-event-red-color)" },
+        { id: 3, color: "var(--bg-event-yellow-color)" },
+        { id: 4, color: "var(--bg-event-blue-color)" },
       ],
-      widthSidebarOpen: "152px",
-      widthSidebarClose: "312px",
+      widthSidebarOpen: "232px",
+      widthSidebarClose: "72px",
       isOpen: false,
       turnButton: "180deg",
-      windowSidebar: "72px",
     };
   },
   computed: {
@@ -47,22 +47,31 @@ export default {
         "button-styled": true,
       };
     },
+    sidebarWidth() {
+      if (this.isOpen) {
+        return {
+          width: this.widthSidebarOpen,
+        };
+      }
+      return {
+        width: this.widthSidebarClose,
+      };
+    },
   },
   methods: {
     changeSize() {
       this.isOpen = !this.isOpen;
-      this.$emit("width", {
-        width: this.isOpen ? this.widthSidebarClose : this.widthSidebarOpen,
-      });
+      this.$emit(
+        "width",
+        this.isOpen ? this.widthSidebarOpen : this.widthSidebarClose
+      );
       this.turnButton = this.isOpen ? "0deg" : "180deg";
-      this.windowSidebar = this.isOpen ? "232px" : "72px";
     },
   },
 };
 </script>
 
 <style lang="sass" scoped>
-
 .sidebar-wrapper
   border-left: 2px solid var(--btn-blue-color-3)
 .button-plus