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>
 

src/components/base/BaseAddingNetwork.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex(class="gap-x-1.5")
-    base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="value.kind")
+    base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
     base-input.input-info.w-full(v-model:value="value.username" :id="value.id" placeholder="Ссылкa")
 </template>
 
@@ -11,8 +11,10 @@ export default {
   name: "TableAddingNetwork",
   components: { BaseInput, BaseSelect },
   props: {
+    selectedOption: String,
     value: Object,
     listAddingNetworks: Array,
+    chooseNetwork: Function,
   },
 };
 </script>

src/components/base/BaseInput.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
-    input.w-full.outline-0.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
+    input.w-full.outline-0.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
     .slot(v-if="withIcon" :class="iconPosition")
       slot.cursor-pointer
 </template>

src/components/base/BaseSelect.vue

@@ -1,12 +1,36 @@
 <template lang="pug">
-  .flex.justify-between.box-border.px-4.w-full.container.items-center.cursor-pointer(@click="openSelect" class="py-2.5" :class="{border: styleBorder}" :style="{ minWidth : widthSelect + 'px'}")
+  .flex.box-border.w-full.container.items-center.cursor-pointer(
+    @click="openSelect"
+    :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
+    :style="{ minWidth : widthSelect + 'px'}"
+    )
     .relative.flex.flex-col
       .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}}
-        .absolute.options(v-show="isSelectOpen" :id="id" :style="{ minWidth : widthSelect + 'px'}")
-          .not-italic.option.pl-4.py-1(v-for="responsible in listData" @click="(e) => chooseOption(e)" :key="responsible" :id="responsible") {{responsible}}
-      .not-italic.select.cursor-pointer.w-full(v-if="forNetworks" :class="optionData")
-        .absolute.options(v-show="isSelectOpen" :id="id" :style="{ minWidth : widthSelect + 'px'}")
-          .not-italic.option.pl-4.py-1(v-for="responsible in listData" @click="(e) => chooseOption(e)" :key="responsible.network" :id="responsible.network" :class="responsible.icon")
+        .absolute.options(
+          v-show="isSelectOpen"
+          :id="id"
+          class="left-[-18px]"
+          :style="{ minWidth : widthSelect + 'px'}"
+          )
+          .not-italic.option.pl-4.py-1(
+            v-for="responsible in listData"
+            @click="(e) => chooseOption(e)"
+            :key="responsible"
+            :id="responsible"
+            ) {{responsible}}
+      .flex.not-italic.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData")
+        .absolute.options.top-5(
+          v-show="isSelectOpen"
+          class="left-[-11px]"
+          :id="id"
+          :style="{ minWidth : widthSelect + 'px'}")
+          .flex.not-italic.option.justify-center.py-1.text-xl(
+            v-for="responsible in listData"
+            @click="(e) => chooseOption(e)"
+            :key="responsible.network"
+            :id="responsible.network"
+            :class="responsible.icon"
+            )
     .select-form-separator.cursor-pointer(v-if="withSeparator")
     .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
 </template>
@@ -58,6 +82,8 @@ export default {
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
+  &.networks
+    color: var(--font-dark-blue-color)
 .options
   z-index: 3
   width: max-content
@@ -65,7 +91,6 @@ export default {
   border: 2px solid var(--border-light-grey-color)
   border-top: none
   border-radius: 0 0 4px 4px
-  left: -18px
 .option
   color: var(--font-black-color)
   border-bottom: 1px solid var(--border-light-grey-color)

src/components/base/buttons/BaseSidebarButton.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   a(:href="path")
-    button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3(:id="id")
+    button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3(:id="id" :class="{active:active}" @click="(e) => changeStylePage(e)")
       slot
 </template>
 
@@ -10,7 +10,8 @@ export default {
   props: {
     path: String,
     id: String,
-    changeStyle: Function,
+    changeStylePage: Function,
+    active: Boolean,
   },
   data() {
     return {
@@ -31,7 +32,7 @@ export default {
   border-top: none
   border-bottom: none
   border-left-style: solid
-.button:focus
+.active
   background-color: var(--btn-blue-color-1)
   border-left-color: var(--btn-blue-color)
   color: var(--btn-blue-color)