[WIP] Добавил элементы для сайдбара в открытом состоянии, виды событий, команды

src/assets/sass/variables.sass

@@ -26,4 +26,4 @@
   --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)
+  --btn-light-green-color: rgba(60, 217, 75, 0.2)

src/components/base/BaseInput.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
     img.cursor-pointer( v-if="withIcon" :class="position" src="@/assets/icons/search-black.svg" alt="SearchTable")
-    input.w-full.outline-0.text-base.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder")
+    input.w-full.outline-0.text-base.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder")
 </template>
 
 <script>
@@ -20,6 +20,8 @@ export default {
       default: "Поиск",
     },
     widthInput: Number,
+    backgroundInput: String,
+    fontSizeInput: String,
   },
   computed: {
     position() {

src/pages/calendar/TheCalendar.vue

@@ -31,10 +31,34 @@ export default {
       },
       eventsData: [],
       team: [
-        { id: 1, name: "Захарова А.О.", avatar: img },
-        { id: 2, name: "Константинопольская Ю.В.", avatar: img },
-        { id: 3, name: "Коломойцев И.К.", avatar: img },
-        { id: 4, name: "Зайцев В.С.", avatar: img },
+        {
+          id: 1,
+          last_name: "Гагарин",
+          first_name: "Юрий",
+          patronymic: "Алексеевич",
+          avatar: img,
+        },
+        {
+          id: 2,
+          last_name: "Константинопольская",
+          first_name: "Юлия",
+          patronymic: "Витальевна",
+          avatar: img,
+        },
+        {
+          id: 3,
+          last_name: "Коломойцев",
+          first_name: "Игорь",
+          patronymic: "Константинович",
+          avatar: img,
+        },
+        {
+          id: 4,
+          last_name: "Зайцев",
+          first_name: "Валерий",
+          patronymic: "Сергеевич",
+          avatar: img,
+        },
       ],
     };
   },

src/pages/calendar/components/CalendarClockColumn.vue

@@ -54,8 +54,7 @@ export default {
 
 <style lang="sass" scoped>
 .current-time
-  color: var(--time-indicator-color)
-
+  color: var(--bg-event-red-color)
 .calendar-clock-column
   width: 80px
   height: 100%

src/pages/calendar/components/CalendarSidebar.vue

@@ -1,28 +1,53 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.bg-white
+  .sidebar.flex.flex-col.bg-white(:class="openSidebar")
     .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
-          base-button-plus(:class="buttonStyled")
+        base-button-plus(:size="40" v-if="!isOpen")
+        .create-event.flex.items-center.justify-center(v-else)
+          base-create-button.font-medium.pl-15px.py-10.5px(text="Создать событие" :withIcon="true")
+        .flex.flex-col.items-center(v-if="!isOpen")
+          base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .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")
+        .flex.items-center.flex-col.gap-y-4(v-else)
+          .events-wrapper.flex.items-center.justify-between
+            .flex {{ "Виды событий" }}
+            base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
+          .flex.flex-col.gap-y-2
+            .relative.flex.items-center.gap-x-3(v-for="event in events")
+              base-input.py-2.pl-6(:placeholder="event.name" :key="event.id" :backgroundInput="red" background-input="transparent" font-size-input="12px")
+              .event-type(:style="{ background: event.color }")
+              span.icon-edit.cursor-pointer
+        .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
+          base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10")
           .team-card(v-for="teammate in team" :key="teammate.id")
             img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
+        .flex.flex-col.gap-y-4(v-else)
+          .events-wrapper.flex.items-center.justify-between
+            .flex {{ "Команды" }}
+            base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
+          .box-team.flex.flex-col.gap-y-2
+            .team-card.flex.items-center.justify-between(v-for="teammate in team" :key="teammate.id")
+              .flex.items-center
+                img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
+                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeLastName(teammate.last_name) + changeInitials(teammate.first_name, teammate.patronymic) }}
+              .span.icon-change-place.cursor-pointer
         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";
+import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
+import BaseInput from "../../../components/base/BaseInput.vue";
 export default {
   name: "CalendarSidebar",
   components: {
     BaseButtonPlus,
     BaseOpenButton,
+    BaseCreateButton,
+    BaseInput,
   },
   props: {
     team: Array,
@@ -30,18 +55,24 @@ export default {
   data() {
     return {
       events: [
-        { 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)" },
+        { 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: {
+    openSidebar() {
+      return {
+        "open-sidebar": this.isOpen,
+      };
+    },
     buttonStyled() {
       return {
         "button-styled": true,
@@ -67,6 +98,14 @@ export default {
       );
       this.turnButton = this.isOpen ? "0deg" : "180deg";
     },
+    changeLastName(lastName) {
+      return lastName.length > this.maxLengthLastName
+        ? lastName.substr(0, this.maxLengthLastName) + "... "
+        : lastName + " ";
+    },
+    changeInitials(firstName, patronymic) {
+      return firstName.substr(0, 1) + "." + patronymic.substr(0, 1) + ".";
+    },
   },
 };
 </script>
@@ -75,8 +114,6 @@ export default {
 .sidebar-wrapper
   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)
@@ -97,10 +134,28 @@ export default {
   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
+.open-sidebar
+  .sidebar-content
+    align-items: flex-end
+    padding-left: 15px
+  .event-type
+    position: absolute
+    width: 8px
+    height: 16px
+    top: 8px
+    left: 8px
+.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
 </style>

tailwind.config.js

@@ -27,7 +27,9 @@ module.exports = {
         "3px": "3px",
         "6px": "6px",
         "10px": "10px",
+        "10.5px": "10.5px",
         "13px": "13px",
+        "15px": "15px",
         "19px": "19px",
         "45px": "45px",
         "74px": "74px",