[WIP] Adding Sidebar on page Calendar

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: "",

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"

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>