From 071ef0e030fb90069732c428db2e9bf2f8c12631 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Fri, 21 Oct 2022 01:06:18 +0300
Subject: [PATCH] [WIP] Adding Sidebar on page Calendar

---
 src/pages/calendar/TheCalendar.vue            |  6 ++--
 .../calendar/components/CalendarSchedule.vue  |  2 +-
 .../calendar/components/CalendarSidebar.vue   | 31 +++++++++++++++++++
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/calendar/components/CalendarSidebar.vue

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 02797ec..63a3a29 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,5 +1,6 @@
 <template lang="pug">
-  .calendar-container
+  .calendar-container.flex
+    calendar-sidebar
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
@@ -12,9 +13,10 @@
 <script>
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
+import CalendarSidebar from "./components/CalendarSidebar.vue";
 export default {
   name: "TheCalendar",
-  components: { CalendarSchedule },
+  components: { CalendarSchedule, CalendarSidebar },
   data() {
     return {
       calendarLayout: "",
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 4ee8b46..c526233 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .schedule.ml-2
+  .schedule.ml-2.w-full
     calendar-header(
       :current-date="currentDate"
       :is-current-date="isCurrentDate"
diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
new file mode 100644
index 0000000..7fc446f
--- /dev/null
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -0,0 +1,31 @@
+<template lang="pug">
+  .sidebar.flex.flex-col.bg-white
+    .sidebar-wrapper.h-full
+      .sidebar-content.items-center
+        base-button-plus
+</template>
+
+<script>
+import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
+export default {
+  components: {
+    BaseButtonPlus,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.sidebar
+  width: 72px
+.sidebar-wrapper
+   border-left: 2px solid var(--btn-blue-color-3)
+   margin: 13px 0
+.sidebar-content
+  padding: 19px 16px
+.button-plus
+  width: 40px
+  height: 40px
+  max-height: 40px
+  background: var(--btn-blue-color)
+  color: var(--default-white)
+</style>