WIP Начала набрасывать хедер медкарты

src/components/LoggedInLayout.vue

@@ -10,7 +10,7 @@
     )
     .flex.flex-auto
       the-sidebar
-      router-view(
+      router-view.mx-2(
         :open-form="openForm",
         :is-open-form="isOpenForm",
         :updated-clients="updatedClients",

src/components/TheSidebar.vue

@@ -1,7 +1,5 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border(
+  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border(:style="bordersStyle")
-    :style="{borderTopRightRadius: this.currenPageBorder ? '0px' : '4px'}"
-  )
     .flex.flex-col.gap-y-6
       base-button-sidebar(
         v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
@@ -49,7 +47,7 @@ export default {
           active: false,
         },
       ],
-      currenPageBorder: true,
+      currentPageBorder: true,
     };
   },
   methods: {
@@ -65,6 +63,12 @@ export default {
     getSettings() {
       return this.pageSettings.find((el) => el.id === "settings");
     },
+    bordersStyle() {
+      return {
+        "border-top-right-radius": this.currentPageBorder ? "0px" : "4px",
+        //"border-bottom-right-radius": this.currentPageBorder ? "0px" : "4px",
+      };
+    },
   },
   mounted() {
     let href = window.location.href.slice(22);
@@ -77,11 +81,11 @@ export default {
   watch: {
     "$route.path"() {
       if (this.$router.currentRoute._value.fullPath === "/calendar") {
-        this.currenPageBorder = true;
+        this.currentPageBorder = true;
         this.pageSettings.forEach((el) =>
           el.path === "#/calendar" ? (el.active = true) : (el.active = false)
         );
-      } else this.currenPageBorder = false;
+      } else this.currentPageBorder = false;
     },
   },
 };

src/pages/clients/components/ClientsWrapper.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.w-full.relative.mx-2
+  .wrapper.flex.w-full.relative
     clients-table(
       :open-form="openForm",
       :is-open-form="isOpenForm",

src/pages/newMedicalCard/TheMedicalCard.vue

@@ -1,8 +1,12 @@
 <template lang="pug">
+  .w-full
+    medical-card-header
 </template>
 
 <script>
+import MedicalCardHeader from "@/pages/newMedicalCard/components/MedicalCardHeader.vue";
 export default {
   name: "TheMedicalCard",
+  components: { MedicalCardHeader },
 };
 </script>

src/pages/newMedicalCard/components/MedicalCardHeader.vue

@@ -0,0 +1,114 @@
+<template lang="pug">
+  .patient-info.pt-4.pr-6.flex.flex-col.justify-between
+    .ml-6.flex.justify-between
+      q-breadcrumbs
+        template(v-slot:separator)
+          q-icon.rotate-180(
+            size="12px",
+            name="app:long-arrow",
+            color="grey",
+          )
+        q-breadcrumbs-el(label="Календарь")
+        q-breadcrumbs-el(label="Медкарта #13019319")
+      q-btn(
+        flat,
+        text-color="grey",
+        icon="app:basket",
+        size="10px"
+        label="Удалить медкарту",
+        no-caps,
+        padding="4px"
+      )
+    .flex.justify-between.mt-22px
+      .flex
+        .menu-item.px-6.py-10px.cursor-pointer.text-base(
+          v-for="item in menuItem",
+          @click="selectItem(item.component)",
+          :class="{'menu-item-active': item.component === currentMenuItem}",
+          :key="item.id",
+          :id="item.id"
+        ) {{item.title}}
+      q-btn-dropdown(
+        color="primary",
+        icon="print",
+        label="Печатать",
+        dropdown-icon="expand_more",
+        flat,
+        no-caps,
+        padding="2px 4px"
+      )
+</template>
+
+<script>
+export default {
+  name: "MedicalCardHeader",
+  data() {
+    return {
+      menuItem: [
+        {
+          title: "Общая информация",
+          id: "basic",
+          component: "Basic",
+        },
+        {
+          title: "Журнал посещений",
+          id: "session-log",
+          component: "SessionLog",
+        },
+        {
+          title: "Планы лечения",
+          id: "treatment-plans",
+          component: "TreatmentPlans",
+        },
+        {
+          title: "Статистика",
+          id: "statistics",
+          component: "Statistics",
+        },
+        {
+          title: "История контактов",
+          id: "contact-history",
+          component: "ContactHistory",
+        },
+      ],
+      currentMenuItem: "Basic",
+    };
+  },
+  methods: {
+    selectItem(componentName) {
+      this.currentMenuItem = this.menuItem.find(
+        (elem) => elem.component === componentName
+      )?.component;
+    },
+  },
+};
+</script>
+<style scoped lang="sass">
+.patient-info
+  width: 83.2%
+  height: 190px
+  background-color: var(--default-white)
+  border-radius: 4px
+.menu-item
+  color: var(--font-grey-color)
+  border-bottom: 1px solid transparent
+.menu-item:first-child
+  border-bottom-left-radius: 4px
+.menu-item-active
+  color: var(--font-dark-blue-color)
+  border-bottom: 1px solid var(--font-dark-blue-color)
+.q-btn
+  font-size: 14px !important
+  font-weight: 500 !important
+.q-btn :deep(.on-left)
+  margin-right: 4px !important
+.q-btn :deep(.q-btn-dropdown__arrow)
+  margin-left: 0px !important
+  opacity: 0.7
+.text-grey
+  color: var(--font-grey-color) !important
+.q-breadcrumbs__el
+  font-size: 12px
+  line-height: 135%
+  color: var(--font-grey-color)
+</style>

src/pages/schedule/TheSchedule.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.w-full.relative.mx-2
+  .wrapper.flex.w-full.relative
     transition(name="schedule", mode="out-in")
       .flex.justify-center.items-center.w-full(v-if="schedulesDataPresence")
           base-loader(