adata-ui 0.3.42 → 0.3.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "0.3.42",
+  "version": "0.3.44",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/BottomNavigationBar/ABottomNavigationBar.vue

@@ -8,7 +8,7 @@
         <div class="bottom-navigation__title">Главная</div>
       </component>
     </li>
-    <li>
+    <li id="services-btn">
       <a :class="{ 'bottom-navigation--active': openService }" @click="handleClick">
         <div class="bottom-navigation__icon">
           <a-nav-icon icon-name="service" class="ic-24"/>
@@ -91,11 +91,19 @@ export default {
       }
     }
   },
+  mounted() {
+    this.$nextTick(() => {
+      document.querySelectorAll('.bottom-navigation li').forEach((elem) => {
+        elem.addEventListener('click', () => {
+          if (elem.id !== 'services-btn') {
+            this.$emit("close")
+          }
+        })
+      })
+    })
+  },
   methods: {
     handleClick() {
-      // this.$router.push({
-      //   hash: "service"
-      // })
       this.$emit("click-menu")
     }
   }
@@ -140,4 +148,4 @@ export default {
     }
   }
 }
-</style>
+</style>

package/src/components/ServiceSlider/AServiceSlider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="services" :class="{ 'services--active': openService }">
+  <div id="services-navs" class="services" :class="{ 'services--active': openService }" :style="computedStyle">
     <div class="services__header">
       <svg width="78" height="24" viewBox="0 0 78 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect width="78" height="24" fill="white"/>
@@ -26,6 +26,7 @@
               :is="navs.links.length ? 'div': module === navs.module ? 'nuxt-link': 'a'"
               v-for="navs in navigations"
               :key="navs.icon"
+              :id="navs.module"
               class="service-card__item"
               :href="navs.links.length ? null: module === navs.module ? null: navs.url[mode]"
               :to="navs.links.length ? null: '/'"
@@ -166,44 +167,46 @@
       </div>
     </div>
 
-    <div class="menu-mobile" :class="{ 'menu-mobile--show': showPanelMenu }">
-      <div class="menu-mobile__header">
-        <div class="menu-mobile__arrow" @click="goBack">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M15 18L9 12L15 6" stroke="#2C3E50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-        <div class="menu-mobile__title">
-          <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g clip-path="url(#clip0_5191_51862)">
-              <path d="M12.3416 8.35498H12.2766C12.2488 8.70065 12.1805 9.04187 12.0732 9.37164L10.8032 13.3333H13.7899L12.5366 9.41164C12.4351 9.06712 12.3698 8.713 12.3416 8.35498Z" fill="#2C3E50"/>
-              <path d="M20.5 2H4.5C3.96957 2 3.46086 2.21071 3.08579 2.58578C2.71071 2.96086 2.5 3.46957 2.5 4V20C2.5 20.5304 2.71071 21.0391 3.08579 21.4142C3.46086 21.7893 3.96957 22 4.5 22H20.5C21.0304 22 21.5391 21.7893 21.9142 21.4142C22.2893 21.0391 22.5 20.5304 22.5 20V4C22.5 3.46957 22.2893 2.96086 21.9142 2.58578C21.5391 2.21071 21.0304 2 20.5 2ZM15.2217 17.9417L14.3883 15.345H10.2383L9.41667 17.9417H6.57167L10.82 6.275H13.9367L18.0867 17.9417H15.2217Z" fill="#2C3E50"/>
-            </g>
-            <defs>
-              <clipPath id="clip0_5191_51862">
-                <rect width="24" height="24" fill="white" transform="translate(0.5)"/>
-              </clipPath>
-            </defs>
-          </svg>
-          <p>{{navigation.title}}</p>
-        </div>
-        <div class="ic-24"></div>
-      </div>
-      <ul class="navigations">
-        <li v-for="link in navigation.links" :key="link.id">
-          <component
-              :is="module === navigation.module ? 'nuxt-link' : 'a' "
-              :to="link.href"
-              :href="module === navigation.module ? '': navigation.url[mode] + link.href"
-          >
-            <p>{{link.title}}</p>
+    <transition name="menu">
+      <div class="menu-mobile" v-show="showPanelMenu" :class="{ 'menu-mobile--show': showPanelMenu }">
+        <div class="menu-mobile__header">
+          <div class="menu-mobile__arrow" @click="goBack">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M9 18L15 12L9 6" stroke="#2C3E50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M15 18L9 12L15 6" stroke="#2C3E50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
-          </component>
-        </li>
-      </ul>
-    </div>
+          </div>
+          <div class="menu-mobile__title">
+            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g clip-path="url(#clip0_5191_51862)">
+                <path d="M12.3416 8.35498H12.2766C12.2488 8.70065 12.1805 9.04187 12.0732 9.37164L10.8032 13.3333H13.7899L12.5366 9.41164C12.4351 9.06712 12.3698 8.713 12.3416 8.35498Z" fill="#2C3E50"/>
+                <path d="M20.5 2H4.5C3.96957 2 3.46086 2.21071 3.08579 2.58578C2.71071 2.96086 2.5 3.46957 2.5 4V20C2.5 20.5304 2.71071 21.0391 3.08579 21.4142C3.46086 21.7893 3.96957 22 4.5 22H20.5C21.0304 22 21.5391 21.7893 21.9142 21.4142C22.2893 21.0391 22.5 20.5304 22.5 20V4C22.5 3.46957 22.2893 2.96086 21.9142 2.58578C21.5391 2.21071 21.0304 2 20.5 2ZM15.2217 17.9417L14.3883 15.345H10.2383L9.41667 17.9417H6.57167L10.82 6.275H13.9367L18.0867 17.9417H15.2217Z" fill="#2C3E50"/>
+              </g>
+              <defs>
+                <clipPath id="clip0_5191_51862">
+                  <rect width="24" height="24" fill="white" transform="translate(0.5)"/>
+                </clipPath>
+              </defs>
+            </svg>
+            <p>{{navigation.title}}</p>
+          </div>
+          <div class="ic-24"></div>
+        </div>
+        <ul class="navigations">
+          <li v-for="link in navigation.links" :key="link.id">
+            <component
+                :is="module === navigation.module ? 'nuxt-link' : 'a' "
+                :to="link.href"
+                :href="module === navigation.module ? '': navigation.url[mode] + link.href"
+            >
+              <p>{{link.title}}</p>
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M9 18L15 12L9 6" stroke="#2C3E50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </component>
+          </li>
+        </ul>
+      </div>
+    </transition>
 
   </div>
 </template>
@@ -507,19 +510,26 @@ export default {
       ]
     }
   },
+  computed: {
+    computedStyle() {
+      return this.module !== 'landing' ? this.openService ? 'transition: 1s ease': 'transition: 0.01s ease': null
+    }
+  },
   watch: {
     openService(e) {
       if (e) {
+        const currentModule = this.navigations.some((nav) => nav.module === this.module)
+        if (currentModule) {
+          document.querySelector(`#services-navs #${this.module}`).click()
+        }
         document.body.style.overflowY = "hidden"
       } else {
         this.showPanelMenu = false
         document.body.style.overflowY = "auto"
       }
     },
-    $route(e) {
-      if (e.hash !== "#service") {
-        this.$emit("hide-service")
-      }
+    $route() {
+      this.$emit("hide-service")
     }
   },
   async created() {
@@ -591,7 +601,7 @@ export default {
   background: #fff;
   left: 0;
   width: 100%;
-  transition: 0.4s ease-in-out;
+  transition: 0.3s ease;
   z-index: 1002;
 
   &__header {
@@ -625,7 +635,7 @@ export default {
   }
 
   &--active {
-    bottom: 0px;
+    bottom: 0;
   }
 
   &__email {
@@ -646,15 +656,11 @@ export default {
 
   .menu-mobile {
     position: fixed;
-    right: -100%;
+    right: 0;
     top: 0;
     height: calc(100% - 64px);
     width: 100%;
     background: linear-gradient(0deg, rgba(189, 199, 206, 0.2), rgba(189, 199, 206, 0.2)), #FFFFFF;
-    transition: 0.4s ease;
-    &--show {
-      right: 0;
-    }
     &__header {
       display: flex;
       justify-content: space-between;
@@ -764,4 +770,13 @@ export default {
     display: block;
   }
 }
+
+.menu-enter-active,
+.menu-leave-active {
+  transition: right 0.3s ease;
+}
+.menu-enter,
+.menu-leave-to {
+  right: -100% !important;
+}
 </style>