[WIP] Добавил сайдбар на странице календаря

src/pages/newCalendar/TheCalendar.vue

@@ -1,13 +1,26 @@
 <template lang="pug">
   .calendar-container.flex
-    calendar-sidebar
+    calendar-open-sidebar(v-if="isOpen", :open-sidebar="openSidebar")
+    calendar-sidebar(v-else, :open-sidebar="openSidebar")
 </template>
 
 <script>
-import CalendarSidebar from "@/pages/newCalendar/components/calendarSidebar.vue";
+import CalendarSidebar from "@/pages/newCalendar/components/CalendarSidebar";
+import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSidebar";
 
 export default {
-  components: { CalendarSidebar },
+  name: "TheCalendar",
+  components: { CalendarSidebar, CalendarOpenSidebar },
+  data() {
+    return {
+      isOpen: false,
+    };
+  },
+  methods: {
+    openSidebar() {
+      this.isOpen = !this.isOpen;
+    },
+  },
 };
 </script>
 

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -0,0 +1,65 @@
+<template lang="pug">
+  .sidebar.flex.flex-col.gap-y-1
+    .form.flex.items-center.justify-end.py-4.pr-4.rounded-t
+      q-btn.rotate-180(
+        @click="openSidebar",
+        dense,
+        padding="8px",
+        style="color: var(--font-grey-color); background: var(--bg-light-grey)"
+      )
+        img(:src="arrow")
+    .form.flex.p-4
+      q-btn(
+        color="primary",
+        size="16px",
+        label="Создать запись",
+        no-caps,
+        icon="add",
+        :style="{width: '100%', height: '40px'}",
+        padding="0"
+      )
+    .flex.flex-col.gap-y-1
+      q-expansion-item.expansion.font-bold.text-xm(
+        expand-separator
+        label="Статус приема"
+      )
+        .flex.flex-col.font-medium.text-smm.p-4.pt-2
+          .flex Не принят
+          .flex Принят
+          .flex Отказ
+          .flex На приеме
+      q-expansion-item.expansion.font-bold.text-xm(
+        expand-separator
+        label="Первичная медкарта"
+      )
+      q-expansion-item.expansion.font-bold.text-xm(
+        expand-separator
+        label="Пациенты"
+      )
+</template>
+
+<script>
+import arrow from "@/assets/icons/double_left_arrow.svg";
+export default {
+  name: "CalendarOpenSidebar",
+  props: { openSidebar: Function },
+  data() {
+    return { arrow };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.sidebar
+  width: 232px
+
+.form
+  background: var(--default-white)
+  width: 100%
+  height: 72px
+
+.expansion
+  background: var(--default-white)
+  border-radius: 4px
+  color: var(--font-dark-blue-color)
+</style>

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -0,0 +1,47 @@
+<template lang="pug">
+  .flex.flex-col.gap-y-1
+    .button.flex.rounded-t
+      q-btn(
+        @click="openSidebar",
+        dense,
+        padding="8px",
+        style="color: var(--font-grey-color); background: var(--bg-light-grey)"
+      )
+        img(:src="arrow")
+    .button.flex      
+      q-btn(color="primary", dense, padding="14px")
+        q-icon(name="app:icon-plus", size="12px")
+    .button.flex
+      q-btn(dense, style="color: var(--font-grey-color)", padding="0px")
+        img(:src="round")
+    .button.flex
+      q-btn(dense, style="color: var(--font-grey-color)", padding="0px")
+        img(:src="medcard")
+    .button.flex.rounded-b
+      q-btn(dense, style="color: var(--font-grey-color)", padding="6.5px 3.5px")
+        img(:src="group")
+</template>
+
+<script>
+import arrow from "@/assets/icons/double_left_arrow.svg";
+import group from "@/assets/icons/person_group.svg";
+import medcard from "@/assets/icons/medcard.svg";
+import round from "@/assets/icons/status_round.svg";
+
+export default {
+  name: "CalendarSidebar",
+  props: { openSidebar: Function },
+  data() {
+    return { arrow, group, medcard, round };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.button
+  width: 72px
+  height: 72px
+  background: var(--default-white)
+  align-items: center
+  justify-content: center
+</style>

src/pages/newCalendar/components/calendarSidebar.vue

@@ -1,11 +0,0 @@
-<template lang="pug">
-
-</template>
-
-<script>
-export default {
-  name: "CalendarSidebar",
-};
-</script>
-
-<style lang="sass" scoped></style>