WIP Набросала хедер

src/pages/newCalendar/components/CalendarHeader.vue

@@ -1,10 +1,69 @@
 <template lang="pug">
-  .calendar-header-wrapper.w-full.flex.items-center.justify-between.py-4.pl-4.pr-6
+  .calendar-header-wrapper.w-full.flex.items-center.p-4.justify-between
+    base-input(
+      iconLeft,
+      outlined,
+      :width="280",
+      placeholder="Найти ...",
+      fontSize="16px",
+      lineHeight="19px"
+    )
+      q-icon(name="app:icon-search", size="20px")
+    .flex.gap-x-4.items-center.justify-center
+      q-btn(
+        color="secondary",
+        round,
+        size="14px",
+        dense,
+        icon="arrow_back_ios_new",
+        text-color="primary",
+        padding="2px 11px 2px 8px"
+      )
+      base-input(
+        outlined,
+        :width="300",
+        fontSize="16px",
+        lineHeight="19px"
+      )
+        q-icon.text(name="app:calendar", size="20px")
+      q-btn(
+        color="secondary",
+        icon="arrow_forward_ios",
+        round,
+        size="14px",
+        text-color="primary",
+        dense
+      ) 
+    .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color
+      q-btn-toggle(
+        v-model="displayType",
+        :options="displayTypesList",
+        no-caps,
+        toggle-color="light-blue-4",
+        padding="4px"
+      )
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
 export default {
   name: "CalendarHeader",
+  components: { BaseInput },
+  data() {
+    return {
+      displayType: "collapsed",
+      displayTypesList: [
+        {
+          label: "col",
+          value: "collapsed",
+        },
+        {
+          label: "exp",
+          value: "expanded",
+        },
+      ],
+    };
+  },
 };
 </script>
 
@@ -15,21 +74,16 @@ export default {
   border-radius: 4px
   z-index: 10
 
-.left-arrow
-  padding: 3px 4px 0 4px !important
-  transform: rotate(90deg)
-
-.right-arrow
-  padding: 3px 4px 0 4px !important
-  transform: rotate(270deg)
-
 .text
   color: var(--font-dark-blue-color)
 
-.today
+.text-grey-color
-  opacity: 0.5
+  color: var(--font-grey-color)
 
-.bg-blue-grey-1
+.text-primary
+  color: var(--font-dark-blue-color-0) !important
+
+.bg-secondary
   background: var(--bg-light-grey) !important
 
 .q-btn--round
@@ -37,4 +91,7 @@ export default {
   height: 32px !important
   min-width: 32px !important
   min-height: 32px !important
+
+.q-btn-group :deep(.q-btn-item)
+  border-radius: 4px !important
 </style>