WIP Анимация пагинации и загрузки клиентов

src/components/HeaderInputs.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
-    .select-container(@click="changeState")
+    .select-container(@click="changeState", v-click-outside="closeOptions")
       .select-wrapper.flex.items-center.cursor-pointer.mx-4.my-2
         .icon-wrapper.icon-search.flex.text-lg.justify-center.items-center
         span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
@@ -30,6 +30,9 @@ export default {
     selectFilter(filter) {
       this.selectedFilter = filter;
     },
+    closeOptions() {
+      this.isOpen = false;
+    },
   },
 };
 </script>

src/components/base/BaseCustomSelect.vue

@@ -86,8 +86,8 @@ export default {
   box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
   border-radius: 4px
   background-color: white
+  max-height: 140px
   overflow-y: auto
-  height: 140px
 .placeholder
   color: #090A15
   opacity: 0.5

src/components/base/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" :class="{active:active}" @click="(e) => changeStylePage(e)")
+    button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3.transition(:id="id" :class="{active:active}" @click="(e) => changeStylePage(e)")
       slot
 </template>