<template lang="pug">
  .w-full.flex
    calendar-sidebar(v-if="!isOpen", :open-sidebar="openSidebar", :create-form="createForm")
    calendar-open-sidebar(v-else, :open-sidebar="openSidebar", :create-form="createForm")
    calendar-wrapper.ml-2(:open-sidebar="isOpen")
    record-creation-form(:is-show-form="isShowForm")
</template>

<script>
import CalendarSidebar from "@/pages/newCalendar/components/CalendarSidebar";
import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSidebar";
import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";
import RecordCreationForm from "@/pages/newCalendar/components/RecordCreationForm";
import * as moment from "moment/moment";

export default {
  name: "TheCalendar",
  components: {
    CalendarSidebar,
    CalendarOpenSidebar,
    CalendarWrapper,
    RecordCreationForm,
  },
  data() {
    return {
      isOpen: false,
      currentDate: moment(),
      isShowForm: false,
    };
  },
  methods: {
    openSidebar() {
      this.isOpen = !this.isOpen;
    },
    createForm() {
      this.isShowForm = true;
    },
  },
};
</script>

<style lang="sass" scoped>
.close
  opacity: 0
  width: 0px
  height: 0
  transition: opacity 0.2s, width 0.3s

.active
  opacity: 1
  width: 232px
  height: 100%
  transition: opacity 0.5s, width 0.3s
</style>
