adata-ui 0.3.25 → 0.3.28

package/src/components/ServiceSlider/AServiceSlider.vue

@@ -0,0 +1,641 @@
+<template>
+  <div class="services" :class="{ 'services--active': openService }">
+    <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"/>
+        <path d="M29.8599 18.3991V5.79907H34.5567C39.2656 5.79907 41.6194 7.84687 41.6181 11.9425C41.6181 13.9045 40.9757 15.4717 39.6909 16.6441C38.4061 17.8165 36.6947 18.4021 34.5567 18.4009L29.8599 18.3991ZM32.8472 8.10848V16.0969H34.3258C35.6181 16.0969 36.6335 15.7279 37.3718 14.9899C38.1101 14.2519 38.478 13.2469 38.4755 11.9749C38.4755 10.7749 38.1108 9.82987 37.3813 9.13987C36.6518 8.44987 35.627 8.10608 34.3068 8.10848H32.8472Z" fill="#2C3E50"/>
+        <path d="M55.1636 18.3991H51.9168L50.9703 15.5965H46.2658L45.3193 18.3991H42.0896L46.9152 5.79907H50.4553L55.1636 18.3991ZM50.2812 13.4167L48.8575 9.17948C48.7427 8.81039 48.6684 8.43095 48.636 8.04727H48.5622C48.5306 8.4206 48.4531 8.78912 48.3313 9.14528L46.8887 13.4167H50.2812Z" fill="#2C3E50"/>
+        <path d="M64.7749 8.10832H60.9886V18.3989H58.0032V8.10832H54.2358V5.79712H64.7749V8.10832Z" fill="#2C3E50"/>
+        <path d="M76.7906 18.3991H73.5382L72.5916 15.5965H67.8796L66.9463 18.3991H63.7109L68.5365 5.79907H72.0767L76.7906 18.3991ZM71.9101 13.4167L70.4864 9.17948C70.3716 8.81039 70.2973 8.43095 70.265 8.04727H70.1911C70.1595 8.4206 70.082 8.78912 69.9602 9.14528L68.5176 13.4167H71.9101Z" fill="#2C3E50"/>
+        <path d="M12.3882 8.06323H12.3144C12.2828 8.43656 12.2053 8.80507 12.0834 9.16123L10.6409 13.4398H14.0334L12.6097 9.20443C12.4945 8.83234 12.4203 8.4499 12.3882 8.06323Z" fill="#2C3E50"/>
+        <path d="M21.6551 1.19995H3.48099C2.87848 1.19995 2.30065 1.42752 1.87461 1.8326C1.44858 2.23768 1.20923 2.78708 1.20923 3.35995V20.64C1.20923 21.2128 1.44858 21.7622 1.87461 22.1673C2.30065 22.5724 2.87848 22.7999 3.48099 22.7999H21.6551C22.2576 22.7999 22.8354 22.5724 23.2614 22.1673C23.6875 21.7622 23.9268 21.2128 23.9268 20.64V3.35995C23.9268 2.78708 23.6875 2.23768 23.2614 1.8326C22.8354 1.42752 22.2576 1.19995 21.6551 1.19995ZM15.6595 18.417L14.7129 15.6126H9.99904L9.06573 18.417H5.83415L10.6597 5.81696H14.1999L18.9138 18.417H15.6595Z" fill="#2C3E50"/>
+      </svg>
+    </div>
+    <div class="services__content">
+      <div class="services__email">
+        <a v-if="isAuth" :href="profile[mode]">
+          <p>{{email}}</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>
+        </a>
+      </div>
+      <div class="services__cards">
+        <div class="service-card">
+          <component
+              :is="navs.links.length ? 'div': module === navs.module ? 'nuxt-link': 'a'"
+              v-for="navs in navigations"
+              :key="navs.icon"
+              class="service-card__item"
+              :href="navs.links.length ? null: module === navs.module ? null: navs.url[mode]"
+              :to="navs.links.length ? null: '/'"
+              @click="goTo(navs.module)"
+          >
+            <img :src="require(`@/assets/icons/service-icons/${navs.icon}.svg`)" alt="">
+            <div class="service-card__title">{{ navs.title }}</div>
+          </component>
+        </div>
+      </div>
+
+      <div ref="currency" class="currency-card">
+        <div ref="arrow" class="currency-card-header">
+          <div class="currency-card-top">
+          </div>
+          <ul class="currency-card-list">
+            <li>Валюта</li>
+            <li>Покупка</li>
+            <li>Продажа</li>
+          </ul>
+        </div>
+        <div class="currency-card-body">
+          <div class="currency-list">
+            <ul v-for="c in currencies" class="currency-list__inner" :key="c.currency">
+              <li>
+                <svg v-if="c.currency === 'USD'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g clip-path="url(#clip0_6194_1573)">
+                    <path d="M26.4 0H-4V16H26.4V0Z" fill="white"/>
+                    <path d="M26.4 0H-4V1.232H26.4V0Z" fill="#B22234"/>
+                    <path d="M26.4 2.45996H-4V3.69196H26.4V2.45996Z" fill="#B22234"/>
+                    <path d="M26.4 4.92407H-4V6.15607H26.4V4.92407Z" fill="#B22234"/>
+                    <path d="M26.4 7.38403H-4V8.61603H26.4V7.38403Z" fill="#B22234"/>
+                    <path d="M26.4 9.8479H-4V11.0799H26.4V9.8479Z" fill="#B22234"/>
+                    <path d="M26.4 12.3081H-4V13.5401H26.4V12.3081Z" fill="#B22234"/>
+                    <path d="M26.4 14.7681H-4V16.0001H26.4V14.7681Z" fill="#B22234"/>
+                    <path d="M8.16 0H-4V8.616H8.16V0Z" fill="#3C3B6E"/>
+                    <path d="M0.604004 0.700107L0.892004 0.908107L0.784004 1.25211L1.072 1.04011L1.36 1.25211L1.252 0.908107L1.54 0.700107H1.184L1.072 0.360107L0.960004 0.700107H0.604004Z" fill="white"/>
+                    <path d="M2.62012 0.700107L2.90812 0.908107L2.80012 1.25211L3.08812 1.04011L3.37612 1.25211L3.26812 0.908107L3.55612 0.700107H3.20012L3.08812 0.360107L2.97612 0.700107H2.62012Z" fill="white"/>
+                    <path d="M4.63574 0.700107L4.92374 0.908107L4.81574 1.25211L5.10374 1.04011L5.39174 1.25211L5.28374 0.908107L5.57174 0.700107H5.21574L5.10374 0.360107L4.99174 0.700107H4.63574Z" fill="white"/>
+                    <path d="M6.65186 0.700107L6.93986 0.908107L6.83186 1.25211L7.11986 1.04011L7.40786 1.25211L7.29986 0.908107L7.58786 0.700107H7.23186L7.11986 0.360107L7.00786 0.700107H6.65186Z" fill="white"/>
+                    <path d="M-0.403809 1.56412L-0.115808 1.77212L-0.223809 2.11612L0.0641914 1.90412L0.352192 2.11612L0.244191 1.77212L0.532191 1.56412H0.176191L0.0641914 1.22412L-0.0478084 1.56412H-0.403809Z" fill="white"/>
+                    <path d="M1.6123 1.56412L1.9003 1.77212L1.7923 2.11612L2.0803 1.90412L2.36831 2.11612L2.2603 1.77212L2.54831 1.56412H2.1923L2.0803 1.22412L1.9683 1.56412H1.6123Z" fill="white"/>
+                    <path d="M3.62793 1.56412L3.91593 1.77212L3.80793 2.11612L4.09593 1.90412L4.38393 2.11612L4.27593 1.77212L4.56393 1.56412H4.20793L4.09593 1.22412L3.98393 1.56412H3.62793Z" fill="white"/>
+                    <path d="M5.64404 1.56412L5.93204 1.77212L5.82404 2.11612L6.11204 1.90412L6.40004 2.11612L6.29204 1.77212L6.58004 1.56412H6.22404L6.11204 1.22412L6.00004 1.56412H5.64404Z" fill="white"/>
+                    <path d="M0.604004 2.42789L0.892004 2.63589L0.784004 2.97989L1.072 2.76789L1.36 2.97989L1.252 2.63589L1.54 2.42789H1.184L1.072 2.08789L0.960004 2.42789H0.604004Z" fill="white"/>
+                    <path d="M2.62012 2.42789L2.90812 2.63589L2.80012 2.97989L3.08812 2.76789L3.37612 2.97989L3.26812 2.63589L3.55612 2.42789H3.20012L3.08812 2.08789L2.97612 2.42789H2.62012Z" fill="white"/>
+                    <path d="M4.63574 2.42789L4.92374 2.63589L4.81574 2.97989L5.10374 2.76789L5.39174 2.97989L5.28374 2.63589L5.57174 2.42789H5.21574L5.10374 2.08789L4.99174 2.42789H4.63574Z" fill="white"/>
+                    <path d="M6.65186 2.42789L6.93986 2.63589L6.83186 2.97989L7.11986 2.76789L7.40786 2.97989L7.29986 2.63589L7.58786 2.42789H7.23186L7.11986 2.08789L7.00786 2.42789H6.65186Z" fill="white"/>
+                    <path d="M-0.379883 3.2959L-0.087883 3.5039L-0.199883 3.8439L0.0881172 3.6359L0.380117 3.8439L0.268117 3.5039L0.556117 3.2959H0.200117L0.0881172 2.9519L-0.0198829 3.2959H-0.379883Z" fill="white"/>
+                    <path d="M1.63574 3.2959L1.92374 3.5039L1.81574 3.8439L2.10374 3.6359L2.39574 3.8439L2.28374 3.5039L2.57174 3.2959H2.21574L2.10374 2.9519L1.99574 3.2959H1.63574Z" fill="white"/>
+                    <path d="M3.65186 3.2959L3.94386 3.5039L3.83186 3.8439L4.11986 3.6359L4.41186 3.8439L4.29986 3.5039L4.58786 3.2959H4.23186L4.11986 2.9519L4.01186 3.2959H3.65186Z" fill="white"/>
+                    <path d="M5.66797 3.2959L5.95597 3.5039L5.84797 3.8439L6.13597 3.6359L6.42797 3.8439L6.31597 3.5039L6.60397 3.2959H6.24797L6.13597 2.9519L6.02797 3.2959H5.66797Z" fill="white"/>
+                    <path d="M0.635742 4.15201L0.923742 4.36001L0.811742 4.70401L1.10374 4.49201L1.39174 4.70401L1.27974 4.36001L1.57174 4.15201H1.21174L1.10374 3.81201L0.991742 4.15201H0.635742Z" fill="white"/>
+                    <path d="M2.65186 4.15201L2.93986 4.36001L2.82786 4.70401L3.11986 4.49201L3.40786 4.70401L3.29586 4.36001L3.58786 4.15201H3.22786L3.11986 3.81201L3.00786 4.15201H2.65186Z" fill="white"/>
+                    <path d="M4.66406 4.15201L4.95606 4.36001L4.84406 4.70401L5.13606 4.49201L5.42406 4.70401L5.31206 4.36001L5.60406 4.15201H5.24406L5.13606 3.81201L5.02406 4.15201H4.66406Z" fill="white"/>
+                    <path d="M6.3999 4.34L6.6919 4.548L6.5799 4.892L6.8719 4.68L7.1599 4.892L7.0479 4.548L7.3399 4.34H6.9799L6.8719 4L6.7599 4.34H6.3999Z" fill="white"/>
+                    <path d="M0.651855 5.85196L0.943855 6.05996L0.831855 6.40396L1.11986 6.19196L1.41186 6.40396L1.29986 6.05996L1.58786 5.85196H1.23186L1.11986 5.51196L1.01186 5.85196H0.651855Z" fill="white"/>
+                    <path d="M2.66797 5.85196L2.95997 6.05996L2.84797 6.40396L3.13597 6.19196L3.42797 6.40396L3.31597 6.05996L3.60797 5.85196H3.24797L3.13597 5.51196L3.02797 5.85196H2.66797Z" fill="white"/>
+                    <path d="M4.68408 5.85196L4.97608 6.05996L4.86408 6.40396L5.15208 6.19196L5.44408 6.40396L5.33208 6.05996L5.62008 5.85196H5.26408L5.15208 5.51196L5.04408 5.85196H4.68408Z" fill="white"/>
+                    <path d="M6.7002 5.85196L6.9922 6.05996L6.8802 6.40396L7.1682 6.19196L7.4602 6.40396L7.3482 6.05996L7.6362 5.85196H7.2802L7.1682 5.51196L7.0602 5.85196H6.7002Z" fill="white"/>
+                    <path d="M0.62793 7.57193L0.91593 7.78393L0.80793 8.12393L1.09593 7.91193L1.38793 8.12393L1.27593 7.78393L1.56393 7.57193H1.20793L1.09593 7.23193L0.98793 7.57193H0.62793Z" fill="white"/>
+                    <path d="M2.64404 7.57193L2.93604 7.78393L2.82404 8.12393L3.11204 7.91193L3.40404 8.12393L3.29204 7.78393L3.58004 7.57193H3.22404L3.11204 7.23193L3.00404 7.57193H2.64404Z" fill="white"/>
+                    <path d="M4.66016 7.57193L4.95216 7.78393L4.84016 8.12393L5.12816 7.91193L5.42016 8.12393L5.30816 7.78393L5.59616 7.57193H5.24016L5.12816 7.23193L5.02016 7.57193H4.66016Z" fill="white"/>
+                    <path d="M6.67627 7.57193L6.96427 7.78393L6.85627 8.12393L7.14427 7.91193L7.43627 8.12393L7.32427 7.78393L7.61227 7.57193H7.25627L7.14427 7.23193L7.03627 7.57193H6.67627Z" fill="white"/>
+                    <path d="M-0.375977 4.9921L-0.0839767 5.2041L-0.195977 5.5441L0.0960232 5.3321L0.384023 5.5441L0.276023 5.2041L0.564023 4.9921H0.204023L0.0960232 4.6521L-0.0159767 4.9921H-0.375977Z" fill="white"/>
+                    <path d="M1.64404 4.9921L1.93204 5.2041L1.82004 5.5441L2.11204 5.3321L2.40004 5.5441L2.28804 5.2041L2.58004 4.9921H2.22004L2.11204 4.6521L2.00004 4.9921H1.64404Z" fill="white"/>
+                    <path d="M3.65576 4.9921L3.94776 5.2041L3.83576 5.5441L4.12776 5.3321L4.41576 5.5441L4.30776 5.2041L4.59576 4.9921H4.23576L4.12776 4.6521L4.01576 4.9921H3.65576Z" fill="white"/>
+                    <path d="M5.67188 4.9921L5.96387 5.2041L5.85187 5.5441L6.14387 5.3321L6.43187 5.5441L6.31987 5.2041L6.61187 4.9921H6.25187L6.14387 4.6521L6.03187 4.9921H5.67188Z" fill="white"/>
+                    <path d="M-0.379883 6.71207L-0.087883 6.92007L-0.199883 7.26007L0.0881172 7.05207L0.380117 7.26007L0.268117 6.92007L0.556117 6.71207H0.200117L0.0881172 6.37207L-0.0198829 6.71207H-0.379883Z" fill="white"/>
+                    <path d="M1.63574 6.71207L1.92374 6.92007L1.81574 7.26007L2.10374 7.05207L2.39574 7.26007L2.28374 6.92007L2.57174 6.71207H2.21574L2.10374 6.37207L1.99574 6.71207H1.63574Z" fill="white"/>
+                    <path d="M3.65186 6.71207L3.94386 6.92007L3.83186 7.26007L4.11986 7.05207L4.41186 7.26007L4.29986 6.92007L4.58786 6.71207H4.23186L4.11986 6.37207L4.01186 6.71207H3.65186Z" fill="white"/>
+                    <path d="M5.66797 6.71207L5.95597 6.92007L5.84797 7.26007L6.13597 7.05207L6.42797 7.26007L6.31597 6.92007L6.60397 6.71207H6.24797L6.13597 6.37207L6.02797 6.71207H5.66797Z" fill="white"/>
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_6194_1573">
+                      <rect width="16" height="16" rx="2" fill="white"/>
+                    </clipPath>
+                  </defs>
+                </svg>
+                <svg v-if="c.currency === 'EUR'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <rect width="16" height="16" rx="2" fill="#314199"/>
+                  <path d="M7.99503 12.0967L8.18379 12.6573L8.75881 12.6568L8.35068 12.9667L8.4629 13.5686L7.99503 13.2271L7.52567 13.5594L7.63925 12.9667L7.23535 12.6549H7.80983L7.99503 12.0967Z" fill="#F8EC26"/>
+                  <path d="M7.99503 2.35718L8.18379 2.91795L8.75881 2.91727L8.35068 3.22735L8.4629 3.82913L7.99503 3.48765L7.52567 3.81994L7.63925 3.22735L7.23535 2.91535H7.80983L7.99503 2.35718Z" fill="#F8EC26"/>
+                  <path d="M10.3328 2.98364L10.5216 3.54428L11.0967 3.54373L10.6886 3.85368L10.8007 4.45546L10.3328 4.11411L9.86342 4.44641L9.97714 3.85368L9.57324 3.54181H10.1477L10.3328 2.98364Z" fill="#F8EC26"/>
+                  <path d="M5.54373 2.98364L5.73249 3.54428L6.30765 3.54373L5.89952 3.85368L6.0116 4.45546L5.54373 4.11411L5.07436 4.44641L5.18808 3.85368L4.78418 3.54181H5.35852L5.54373 2.98364Z" fill="#F8EC26"/>
+                  <path d="M10.3328 11.4387L10.5216 11.9995L11.0967 11.9989L10.6886 12.3089L10.8007 12.9107L10.3328 12.5693L9.86342 12.9016L9.97714 12.3089L9.57324 11.9969H10.1477L10.3328 11.4387Z" fill="#F8EC26"/>
+                  <path d="M5.54373 11.4387L5.73249 11.9995L6.30765 11.9989L5.89952 12.3089L6.0116 12.9107L5.54373 12.5693L5.07436 12.9016L5.18808 12.3089L4.78418 11.9969H5.35852L5.54373 11.4387Z" fill="#F8EC26"/>
+                  <path d="M3.75285 4.82153L3.94161 5.38231L4.51664 5.38162L4.10864 5.6917L4.22058 6.29349L3.75285 5.95214L3.28348 6.2843L3.39706 5.6917L2.99316 5.3797H3.56764L3.75285 4.82153Z" fill="#F8EC26"/>
+                  <path d="M12.1825 4.82153L12.3713 5.38231L12.9465 5.38162L12.5383 5.6917L12.6504 6.29349L12.1825 5.95214L11.7132 6.2843L11.8267 5.6917L11.4229 5.3797H11.9973L12.1825 4.82153Z" fill="#F8EC26"/>
+                  <path d="M3.75285 9.68262L3.94161 10.2434L4.51664 10.2427L4.10864 10.5528L4.22058 11.1546L3.75285 10.8131L3.28348 11.1454L3.39706 10.5528L2.99316 10.2408H3.56764L3.75285 9.68262Z" fill="#F8EC26"/>
+                  <path d="M12.1825 9.68262L12.3713 10.2434L12.9465 10.2427L12.5383 10.5528L12.6504 11.1546L12.1825 10.8131L11.7132 11.1454L11.8267 10.5528L11.4229 10.2408H11.9973L12.1825 9.68262Z" fill="#F8EC26"/>
+                  <path d="M3.1967 7.23389L3.38546 7.79466L3.96062 7.79398L3.55248 8.10406L3.66456 8.70584L3.1967 8.36436L2.72733 8.69665L2.84091 8.10406L2.43701 7.79206H3.01149L3.1967 7.23389Z" fill="#F8EC26"/>
+                  <path d="M12.7991 7.23389L12.9879 7.79466L13.563 7.79398L13.1549 8.10406L13.267 8.70584L12.7991 8.36436L12.3297 8.69665L12.4434 8.10406L12.0396 7.79206H12.6139L12.7991 7.23389Z" fill="#F8EC26"/>
+                </svg>
+                <svg v-if="c.currency === 'CNY'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <rect width="16" height="16" rx="2" fill="#DE2910"/>
+                  <path d="M4.00115 1.60034L5.41155 5.94194L1.71875 3.25874H6.28355L2.59075 5.94194L4.00115 1.60034Z" fill="#FFDE00"/>
+                  <path d="M7.3125 2.01097L8.3117 0.86377L8.1781 2.37977L7.3957 1.07497L8.7957 1.67017L7.3125 2.01097Z" fill="#FFDE00"/>
+                  <path d="M8.80811 3.31338L10.1745 2.64378L9.4633 3.98858L9.2481 2.48218L10.3073 3.57418L8.80811 3.31338Z" fill="#FFDE00"/>
+                  <path d="M8.82959 5.38071L10.3496 5.32631L9.15199 6.26471L9.56959 4.80151L10.0912 6.23031L8.82959 5.38071Z" fill="#FFDE00"/>
+                  <path d="M7.37572 6.69973L8.79972 7.23653L7.33252 7.63973L8.28292 6.45093L8.21172 7.97093L7.37572 6.69973Z" fill="#FFDE00"/>
+                </svg>
+                <svg v-if="c.currency === 'RUB'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g clip-path="url(#clip0_6194_1691)">
+                    <path d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V5.00343H0V2Z" fill="#F0F0F0"/>
+                    <rect y="5.00342" width="16" height="6.00154" fill="#0039A6"/>
+                    <path d="M0 11.0049H16V13.9999C16 15.1045 15.1046 15.9999 14 15.9999H2C0.895431 15.9999 0 15.1045 0 13.9999V11.0049Z" fill="#D52B1E"/>
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_6194_1691">
+                      <rect width="16" height="16" rx="2" fill="white"/>
+                    </clipPath>
+                  </defs>
+                </svg>
+                <span>{{c.currency}}</span>
+              </li>
+              <li>
+                <span>{{c.sell}}</span>
+                <svg width="16" v-if="c.sell_state === 'DOWN'" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M8 12.0254L12.3301 4.02978H3.66987L8 12.0254Z" fill="#FF2E43"/>
+                </svg>
+                <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M8 3.97461L12.3301 11.9702H3.66987L8 3.97461Z" fill="#00B92D"/>
+                </svg>
+              </li>
+              <li>
+                <span>{{c.buy}}</span>
+                <svg width="16" v-if="c.buy_state === 'DOWN'" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M8 12.0254L12.3301 4.02978H3.66987L8 12.0254Z" fill="#FF2E43"/>
+                </svg>
+                <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M8 3.97461L12.3301 11.9702H3.66987L8 3.97461Z" fill="#00B92D"/>
+                </svg>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </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>
+            <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>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AServiceSlider",
+  props: {
+    module: {
+      type: String,
+      required: true
+    },
+    mode: {
+      type: String,
+      default: "dev"
+    },
+    openService: {
+      type: Boolean,
+      default: false
+    },
+    email: {
+      type: String,
+      default: ""
+    },
+    isAuth: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      showPanelMenu: false,
+      navigation: null,
+      profile: {
+        dev: "https://adtdev.kz/profile",
+        staging: "https://adada.kz/profile",
+        prod: "https://adata.kz/profile"
+      },
+      touch: {
+        startY: 0,
+        endY: 0
+      },
+      currencies: null,
+      cardBottom: -108,
+      navigations: [
+        {
+          icon: "counterparty",
+          title: "Контрагенты",
+          module: "counterparty",
+          url: {
+            dev: 'https://pk.adtdev.kz',
+            staging: 'https://pk.adada.kz',
+            prod: 'https://pk.adata.kz',
+          },
+          links: [
+            {
+              id: 1,
+              title: "Проверка контрагентов",
+              href: "/",
+            },
+            {
+              id: 2,
+              title: "Сравнение контрагентов",
+              href: "/counterparty/compare"
+            },
+            {
+              id: 3,
+              title: "Косвенные связи",
+              href: "/counterparty/search-connections/check"
+            },
+            {
+              id: 4,
+              title: "Массовая",
+              href: "/counterparty/employees-check"
+            },
+            {
+              id: 5,
+              title: "Зарубежные контрагенты",
+              href: "/counterparty/foreign"
+            },
+            {
+              id: 6,
+              title: "Санкции",
+              href: "/counterparty/sanctions"
+            },
+          ]
+        },
+        {
+          icon: "jobs",
+          title: "Работа",
+          module: "works",
+          url: {
+            dev: 'https://work.adtdev.kz',
+            staging: 'https://work.adada.kz',
+            prod: 'https://work.adata.kz',
+          },
+          links: []
+        },
+        {
+          icon: "tenders",
+          title: "Тендеры",
+          module: "tenders",
+          url: {
+            dev: 'https://tender.adtdev.kz',
+            staging: 'https://tender.adada.kz',
+            prod: 'https://tender.adata.kz',
+          },
+          links: [
+            {
+              id: 1,
+              title: "Поиск тендеров",
+              href: "/"
+            },
+            {
+              id: 2,
+              title: "Поиск договоров",
+              href: "/main/contracts"
+            },
+            {
+              id: 3,
+              title: "Планы закупок",
+              href: "/main/plans"
+            }
+          ]
+        },
+        {
+          icon: "penalty",
+          title: "Штрафы",
+          module: "penalty",
+          url: {
+            dev: 'https://avto.adtdev.kz',
+            staging: 'https://avto.adada.kz',
+            prod: 'https://avto.adata.kz',
+          },
+          links: [
+            {
+              id: 1,
+              title: "Проверка штрафов",
+              href: "/"
+            },
+            {
+              id: 2,
+              title: "Проверка авто",
+              href: "/check"
+            },
+            {
+              id: 3,
+              title: "Массовая проверка авто",
+              href: "/bulk-check"
+            }
+          ]
+        },
+        {
+          icon: "marketing",
+          title: "Маркетинг",
+          module: "marketing",
+          url: {
+            dev: 'https://marketing.adtdev.kz',
+            staging: 'https://marketing.adada.kz',
+            prod: 'https://marketing.adata.kz',
+          },
+          links: [
+            {
+              id: 1,
+              title: "Анализ закупок",
+              href: "/"
+            },
+            {
+              id: 2,
+              title: "Поиск клиентов",
+              href: "/unload-data"
+            },
+          ]
+        },
+      ]
+    }
+  },
+  watch: {
+    openService(e) {
+      if (e) {
+        document.body.style.overflowY = "hidden"
+      } else {
+        this.showPanelMenu = false
+        document.body.style.overflowY = "auto"
+      }
+    },
+    $route(e) {
+      if (e.hash !== "#service") {
+        this.$emit("hide-service")
+      }
+    }
+  },
+  async created() {
+    this.navigation = this.navigations[0]
+    await this.fetchCurrencies()
+  },
+  mounted() {
+    this.$refs.arrow.addEventListener("touchstart", evt => this.touchstart(evt))
+    this.$refs.arrow.addEventListener("touchmove", evt => this.touchmove(evt))
+    this.$refs.arrow.addEventListener("touchend", () => this.touchend())
+  },
+  methods: {
+    goTo(module) {
+      this.navigation = this.navigations.find(navigation => navigation.module === module)
+      if (this.navigation.links.length) {
+        this.showPanelMenu = true
+      }
+    },
+    goBack() {
+      this.showPanelMenu = false
+    },
+    touchstart(e) {
+      this.touch.startY = e.touches[0].clientY
+      this.touch.endY = 0
+    },
+    touchmove(e) {
+      this.touch.endY = e.touches[0].clientY
+      const pos = window.innerHeight - e.touches[0].clientY + (this.cardBottom / 2 - 10) + e.target.clientHeight / 2
+      if (pos < this.$refs.currency.clientHeight && pos > e.target.clientHeight) {
+        this.$refs.currency.setAttribute(
+            "style",
+            `bottom: ${ pos + this.cardBottom - e.target.clientHeight }px`)
+      }
+    },
+    touchend() {
+      if (this.touch.endY < this.touch.startY) {
+        this.$refs.currency.setAttribute(
+            "style",
+            `bottom: ${ -this.cardBottom / 2 + 10}px; transition: 0.3s ease;`)
+      } else {
+        this.$refs.currency.setAttribute(
+            "style",
+            `bottom: ${ this.cardBottom}px; transition: 0.3s ease;`)
+      }
+    },
+    async fetchCurrencies() {
+      try {
+        const response = await fetch('https://users.adata.kz/api/v1/information/currency');
+        const {data} = await response.json();
+
+        if (data.currencies) {
+          this.currencies = data.currencies;
+        }
+
+      } catch (e) {
+        console.log(e.message)
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.services {
+  display: none;
+  position: fixed;
+  bottom: -100%;
+  height: 100%;
+  background: #fff;
+  left: 0;
+  width: 100%;
+  transition: 0.4s ease-in-out;
+  z-index: 1002;
+
+  &__header {
+    min-height: 44px;
+    display: grid;
+    place-items: center;
+    border-bottom: 0.5px solid #9DA3AC;
+    padding: 10px 0;
+  }
+
+  &__content {
+    padding: 8px;
+  }
+
+  .service-card {
+    display: flex;
+    flex-wrap: wrap;
+    &__item {
+      text-align: center;
+      flex: 1 0 calc(100% / 3);
+      max-width: calc(100% / 3);
+      color: #2c3e50;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 20px;
+      margin: 16px 0;
+    }
+    &__title {
+      padding-top: 8px;
+    }
+  }
+
+  &--active {
+    bottom: 0px;
+  }
+
+  &__email {
+    min-height: 64px;
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 16px;
+      background: linear-gradient(0deg, rgba(0, 122, 255, 0.12), rgba(0, 122, 255, 0.12)), #FFFFFF;
+      border-radius: 2px;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      color: #2c3e50;
+    }
+  }
+
+  .menu-mobile {
+    position: fixed;
+    right: -100%;
+    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;
+      align-items: center;
+      padding: 14px 16px;
+      border-bottom: 0.5px solid #9DA3AC;
+      background: #FFFFFF;
+    }
+    &__title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    &__arrow {
+      height: 24px;
+    }
+    .navigations {
+      li {
+        background: #FFFFFF;
+        margin: 8px 0;
+        &:hover {
+          background: linear-gradient(0deg, rgba(0, 122, 255, 0.12), rgba(0, 122, 255, 0.12)), #FFFFFF;
+        }
+        a {
+          padding: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 20px;
+          color: #2c3e50;
+          &.nuxt-link-exact-active {
+            background: linear-gradient(0deg, rgba(0, 122, 255, 0.12), rgba(0, 122, 255, 0.12)), #FFFFFF;
+          }
+        }
+      }
+    }
+  }
+
+  .currency-card {
+    filter: drop-shadow(0px 2px 4px rgba(157, 163, 172, 0.2));
+    position: absolute;
+    bottom: -108px;
+    width: calc(100% - 16px);
+    &-header {
+      background: #007AFF;
+      box-shadow: 0px -2px 6px rgba(1, 68, 141, 0.39);
+      border-radius: 8px 8px 0px 0px;
+      height: 48px;
+    }
+
+    &-top {
+      height: 24px;
+      display: grid;
+      place-items: center;
+
+      &:before {
+        content: "";
+        width: 28px;
+        height: 4px;
+        background: #FFFFFF;
+        display: block;
+        border-radius: 4px;
+      }
+    }
+
+    &-list {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 24px 4px;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 20px;
+      color: #FFFFFF;
+    }
+
+    &-body {
+      padding: 16px 24px;
+      background: #FFFFFF;
+      .currency-list {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        &__inner {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 20px;
+          color: #2C3E50;
+
+          li {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1024px){
+    display: block;
+  }
+}
+</style>

package/src/components/ServiceSlider/ServiceSlider.stories.js

@@ -0,0 +1,20 @@
+import AServiceSlider from "./AServiceSlider";
+
+export default {
+    title: 'ServiceSlider',
+    component: AServiceSlider,
+    template: "<a-service-slider></a-service-slider>"
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { AServiceSlider },
+    props: Object.keys(argTypes),
+    template: "<a-service-slider v-bind='$props'></a-service-slider>",
+});
+
+export const serviceSlider = Template.bind({})
+
+serviceSlider.args = {
+    openService: false,
+    isAuth: false
+}