WIP доделал редактирование клиента, исправил отображение элементов sidebar, убрал лишние элементы детальной информации

src/components/TheSidebar.vue

@@ -1,15 +1,11 @@
 <template lang="pug">
   .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border
     .flex.flex-col.gap-y-6
-      the-button-sidebar(id="home" path="#/")
-        .icon-home.icon
-      the-button-sidebar(id="calendar" path="#/calendar")
-        .icon-calendar-2.icon
-      the-button-sidebar(id="user" path="#/clients")
-        .icon-person-2.icon
+      the-button-sidebar( v-for="button in pageSettings.filter((el) => el.id !== 'settings')" :path="button.path" :id="button.id" :active="button.active" :change-style-page="changeStylePage")
+        .icon(:class="button.icon")
     .flex.text-4xl.flex-col.gap-y-6
-      the-button-sidebar(id="settings" path="#/settings")
-        .icon-settings.icon
+      the-button-sidebar(:path="getSettings.path" :id="getSettings.id" :active="getSettings.active" :change-style-page="changeStylePage")
+        .icon(:class="getSettings.icon")
 </template>
 
 <script>
@@ -18,6 +14,58 @@ import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
 export default {
   name: "TheSidebar",
   components: { TheButtonSidebar },
+  data() {
+    return {
+      pageSettings: [
+        {
+          id: "home",
+          path: "#/",
+          active: true,
+          icon: "icon-home",
+        },
+        {
+          id: "calendar",
+          path: "#/calendar",
+          active: false,
+          icon: "icon-calendar-2",
+        },
+        {
+          id: "user",
+          path: "#/clients",
+          active: false,
+          icon: "icon-person-2",
+        },
+        {
+          id: "settings",
+          path: "#/settings",
+          icon: "icon-settings",
+          active: false,
+        },
+      ],
+    };
+  },
+  methods: {
+    changeStylePage(e) {
+      this.pageSettings.forEach((el, index) => {
+        el.id === e.currentTarget.id
+          ? (this.pageSettings[index].active = true)
+          : (this.pageSettings[index].active = false);
+      });
+    },
+  },
+  computed: {
+    getSettings() {
+      return this.pageSettings.find((el) => el.id === "settings");
+    },
+  },
+  mounted() {
+    let href = window.location.href.slice(22);
+    this.pageSettings.forEach((el, index) => {
+      el.path === href
+        ? (this.pageSettings[index].active = true)
+        : (this.pageSettings[index].active = false);
+    });
+  },
 };
 </script>