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

src/components/LoggedInLayout.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.flex.flex-col.w-full.h-full.gap-y-2
+  .flex.flex-col.w-full.h-full.gap-y-2
     the-header(
       :url="url",
       :is-open-form="isOpenForm",
@@ -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(
-    :style="{borderTopRightRadius: this.currenPageBorder ? '0px' : '4px'}"
-  )
+  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border(:style="bordersStyle")
     .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;
     },
   },
 };