adata-ui 0.3.73 → 0.3.74

package/src/components/Header/Profile.vue

@@ -1,670 +1,670 @@
-<template>
-  <div class="profile" :class="{ active: active }">
-    <div v-click-outside="() => { active = false; }">
-      <div class="profile__inner">
-        <div class="profile__item" @click="active = !active">
-          <div v-show="isAuthenticated" class="profile__item-link">
-            <span class="desktop">{{ email }}</span>
-            <svg
-                width="18"
-                height="18"
-                fill="#25476AFF"
-                class="desktop arrow-svg"
-                :class="{ rotate: active }"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 16 16"
-            >
-              <path fill="none" d="M0 0h16v16H0z"></path>
-              <path
-                  fill="none"
-                  d="M3 6.5L8 10l5-3.5"
-                  stroke="#2C3E50"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-              ></path>
-            </svg>
-          </div>
-          <button
-              @click.prevent="goAuth"
-              class="sign"
-              v-show="!isAuthenticated"
-          >
-            <svg
-                width="18"
-                height="18"
-                fill="#25476AFF"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 16 16"
-                class="desktop"
-            >
-              <path fill="#fff" d="M0 0h16v16H0z" stroke="none"></path>
-              <path
-                  d="M8 10l2-2.054L8.077 6"
-                  stroke-miterlimit="10"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-              ></path>
-              <path
-                  d="M6 4.1V2h8v12H6v-1.65M9 8H2"
-                  stroke-miterlimit="10"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-              ></path>
-            </svg>
-            <span class="sign_text">Вход</span>
-          </button>
-        </div>
-      </div>
-      <SlideToggle v-slot="{ animationClass }">
-        <profile-menu
-            v-if="isAuthenticated"
-            v-show="active"
-            :class="animationClass"
-            @logout="logout"
-            :balance="balance"
-            :rate="rate"
-            :mode="mode"
-            :tab="tab"
-        />
-      </SlideToggle>
-    </div>
-  </div>
-</template>
-
-<script>
-import { profileDropDown } from "../../configs/profileDropDown";
-import SlideToggle from "../transitions/SlideToggle";
-import vClickOutside from "v-click-outside";
-import ProfileMenu from "./ProfileMenu";
-
-export default {
-  directives: {
-    clickOutside: vClickOutside.directive,
-  },
-  props: {
-    mode: {
-      type: String,
-      required: true,
-      validator: function (value) {
-        return ["prod", "dev", "staging"].indexOf(value) !== -1;
-      },
-    },
-    isAuthenticated: {
-      type: Boolean,
-      default: false,
-    },
-    email: {
-      type: String,
-      default: "",
-    },
-    loginUrl: {
-      type: String,
-      default: "",
-      required: true,
-    },
-    activeTabKey: {
-      type: String,
-      default: "",
-      required: true,
-    },
-    rate: {
-      type: String,
-      default: ""
-    },
-    balance: {
-      type: [Number, String],
-      default: 0
-    },
-    tab: {
-      type: String,
-      default: ""
-    }
-  },
-  components: {
-    ProfileMenu,
-    SlideToggle,
-  },
-  data() {
-    return {
-      profileDropDown,
-      active: false,
-      chosenElem: {
-        children: [],
-      },
-    };
-  },
-  mounted() {
-    const item = this.activeTabKey ? this.profileDropDown.find(el => el.key && el.key.includes(this.activeTabKey)) : null;
-    if(item && window && window.innerWidth > 850) {
-      this.chosenElem = item;
-      this.chosenElem.opened = true;
-    }
-  },
-  computed: {
-    someMobileOpened() {
-      return this.profileDropDown.filter(
-          (el) => el.opened && el.children.length > 0
-      );
-    },
-  },
-  methods: {
-    setShowModal(bool) {
-      this.$emit("setShowModal", bool);
-    },
-    logout() {
-      this.$emit("logout");
-    },
-    preventLink(disabled, e) {
-      if (disabled) {
-        e.preventDefault();
-      }
-    },
-    async showModal(url, name) {
-      if (name.includes("Текущий")) {
-        if (window.location.href.includes(url)) {
-          this.$emit("setIsReplenishModal", true);
-          this.setShowModal(true);
-        } else {
-          await window.open(url + "&modal=show", "_self");
-        }
-      }
-    },
-    handleClick(url, name) {
-      if (!name.includes("Текущий")) {
-        window.open(url, name === 'Избранные' ? '_blank' : '_self');
-      }
-    },
-    rotateItem(index) {
-      this.chosenElem = this.profileDropDown[index];
-      const array = this.profileDropDown;
-      array.forEach((el, idx) => {
-        if (index === idx) {
-          this.$set(el, 'opened', !el.opened);
-        } else this.$set(el, 'opened', false)
-      });
-    },
-    goAuth() {
-      const fullPath = encodeURIComponent(window.location.toString());
-      if (window) {
-        window.location.href = `${this.loginUrl}?url=${fullPath}`;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-a {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-svg {
-  transition: all 0.3s linear;
-}
-
-svg.rotated {
-  transform: rotate(180deg);
-}
-
-.gray-text {
-  font-size: 12px;
-  line-height: 14px;
-  font-weight: 400;
-  color: #2c3e50;
-  padding: 10px 16px;
-  cursor: pointer;
-}
-
-.profile {
-  position: relative;
-
-  &__inner {
-    padding: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  &__item {
-    font-size: 14px;
-    font-weight: 600;
-    margin: 0;
-    padding: 8px 0;
-    white-space: nowrap;
-    cursor: pointer;
-
-    &-link {
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-
-      &:first-child {
-        @media (max-width: 1025px) {
-          display: none;
-        }
-      }
-
-      &:nth-child(2) {
-        display: none;
-        @media (max-width: 1025px) {
-          display: flex;
-        }
-      }
-    }
-
-    span {
-      white-space: nowrap;
-      margin: 0 7px;
-    }
-
-    .arrow-svg {
-      transition: all 0.3s;
-      vertical-align: middle;
-      width: 16px;
-      height: 16px;
-      transform: rotate(0deg);
-
-      &.rotate {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .profile-menu {
-    //width: 368px;
-    //height: 100%;
-    position: absolute;
-    right: 0;
-    top: 100%;
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #959cb140;
-    border-radius: 2px;
-    z-index: 10000;
-    @media (max-width: 1025px) {
-      display: none;
-    }
-
-    &__items {
-      font-size: 12px;
-      line-height: 14px;
-      font-weight: 400;
-      color: #2c3e50;
-      cursor: pointer;
-
-      span.balance {
-        padding: 2px 8px;
-        color: #698096;
-        background: #ECEFF1;
-        border-radius: 100px;
-      }
-
-      .rate-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        color: #007aff;
-        font-size: 14px;
-        font-weight: 600;
-        span.rate {
-          color: #2C3E50;
-          font-size: 12px;
-        }
-      }
-
-      div:not(:last-child) > a > .gray-text {
-        border-bottom: 0.5px solid #bdc7ce;
-      }
-
-      div:not(:last-child) > .gray-text {
-        border-bottom: 0.5px solid #bdc7ce;
-
-        & + div {
-          padding: 10px 16px;
-        }
-      }
-
-      div
-      > .gray-text:not(.profile-menu__balance-link):not(.profile-menu__links) {
-        padding: 0;
-
-        a {
-          color: #2c3e50;
-
-          &:visited {
-            color: #2c3e50;
-          }
-        }
-      }
-    }
-
-    &__item__child {
-      padding: 0 16px 0 32px;
-      height: 40px;
-      display: flex;
-      border-top: 0.5px solid #bdc7ce;
-      align-items: center;
-
-      &:hover {
-        background: #2c3e500c;
-      }
-
-      span {
-        display: flex;
-        align-items: center;
-
-        svg {
-          margin-right: 5px;
-
-          path {
-            fill: #2c3e500c !important;
-          }
-        }
-      }
-    }
-
-    &__item__children {
-      padding: 0 16px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 40px;
-
-      &:hover {
-        background: #2c3e500c;
-      }
-
-      &.active {
-        background: #ECEFF1;
-        border-left: 3px solid #007aff;
-      }
-    }
-
-    &__balance-link {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 40px;
-      padding: 0 16px;
-
-      &:hover {
-        background: #2c3e500d;
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #eef0f5;
-      }
-    }
-
-    &__balance {
-      font-size: 14px;
-      font-weight: 600;
-      color: #007aff;
-      white-space: nowrap;
-    }
-
-    &__links {
-      display: flex;
-      align-items: center;
-      align-content: center;
-      height: 40px;
-      padding: 0 16px;
-
-      &:hover {
-        background: linear-gradient(0deg, rgba(236, 239, 241, 0.5), rgba(236, 239, 241, 0.5)), #FFFFFF;
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #eef0f5;
-      }
-    }
-  }
-}
-
-.sign {
-  height: 40px;
-  background: transparent;
-  border: none;
-  border-radius: 0 0 2px 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  &:hover {
-    svg {
-      stroke: #71757a !important;
-    }
-
-    span {
-      color: #71757a;
-    }
-  }
-
-  &:active {
-    svg {
-      stroke: #9da3ac !important;
-    }
-
-    span {
-      color: #9da3ac;
-    }
-  }
-
-  svg {
-    margin-right: 8px;
-    fill: none !important;
-    stroke: #2c3e50 !important;
-    @media (max-width: 1025px) {
-      stroke: none !important;
-      margin-right: 24px;
-    }
-  }
-
-  span {
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 16px;
-    color: #2c3e50;
-    margin: 0 0;
-  }
-}
-
-.requests {
-  &__link {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 400;
-    padding: 12px;
-    color: var(--newColor);
-    white-space: nowrap;
-    margin: 0 6px 0 0;
-    @media (max-width: 1025px) {
-      display: none;
-    }
-
-    svg {
-      vertical-align: middle;
-      width: 20px;
-      height: 20px;
-      margin-right: 4px;
-      margin-bottom: 2px;
-    }
-
-    span {
-      color: #2c3e50;
-      font-weight: 600;
-    }
-  }
-}
-
-.user {
-  display: none;
-  @media (max-width: 1025px) {
-    width: 24px;
-    height: 24px;
-    margin-right: 24px;
-    display: flex;
-  }
-}
-
-.exit-mobile {
-  display: none;
-  @media (max-width: 1025px) {
-    display: block;
-    width: 24px;
-    height: 24px;
-    margin-right: 12px;
-  }
-}
-
-.mobile-table {
-  display: none;
-  @media (max-width: 1025px) {
-    display: block;
-  }
-
-  &-head {
-    padding: 0 16px;
-    background: #f4f4f4;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 40px;
-
-    p {
-      font-weight: 600;
-      font-size: 17px;
-      line-height: 19px;
-      color: #2c3e50;
-    }
-
-    svg {
-      width: 18px;
-      height: 18px;
-      @media (max-width: 1025px) {
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    &-chosen {
-      position: relative;
-
-      & > div {
-        position: absolute;
-      }
-
-      p {
-        text-align: center;
-        width: 100%;
-      }
-    }
-  }
-}
-
-.profile-menu-mobile {
-  height: 100%;
-
-  .bb > a,
-  .bb > a:visited {
-    color: #000;
-  }
-
-  &__inner {
-    display: flex;
-    flex-direction: column;
-    height: 72%;
-  }
-
-  &__links,
-  &__item {
-    padding: 0 16px;
-    height: 52px;
-    border: 1px solid #9da3ac;
-    border-bottom: none;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-  }
-
-  &__balance-link {
-    padding: 0 16px;
-    height: 52px;
-    border: 1px solid #9da3ac;
-    border-bottom: none;
-    font-size: 14px;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__balance {
-    color: #1e88e5;
-    font-size: 16px;
-    white-space: nowrap;
-    display: flex;
-    align-items: center;
-
-    &-items {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      &__upper-text {
-        font-weight: normal;
-        font-size: 10px;
-        line-height: 14px;
-        color: #69797d;
-        margin-bottom: 4px;
-      }
-
-      &__bot-text {
-        font-weight: 600;
-        font-size: 12px;
-        line-height: 16px;
-        color: #2c3e50;
-      }
-    }
-  }
-}
-
-.exit-mob {
-  background: #ffcd33;
-  border-radius: 2px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 16px;
-  color: #2c3e50;
-  margin: 16px 16px 0;
-
-  svg {
-    margin-right: 8px;
-    fill: none !important;
-  }
-}
-
-.bb {
-  &:last-child {
-    border-bottom: 1px solid #9da3ac;
-  }
-}
-
-.button-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.sign_text {
-  @media (max-width: 1025px) {
-    display: none;
-  }
-}
-</style>
+<template>
+  <div class="profile" :class="{ active: active }">
+    <div v-click-outside="() => { active = false; }">
+      <div class="profile__inner">
+        <div class="profile__item" @click="active = !active">
+          <div v-show="isAuthenticated" class="profile__item-link">
+            <span class="desktop">{{ email }}</span>
+            <svg
+                width="18"
+                height="18"
+                fill="#25476AFF"
+                class="desktop arrow-svg"
+                :class="{ rotate: active }"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+            >
+              <path fill="none" d="M0 0h16v16H0z"></path>
+              <path
+                  fill="none"
+                  d="M3 6.5L8 10l5-3.5"
+                  stroke="#2C3E50"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+              ></path>
+            </svg>
+          </div>
+          <button
+              @click.prevent="goAuth"
+              class="sign"
+              v-show="!isAuthenticated"
+          >
+            <svg
+                width="18"
+                height="18"
+                fill="#25476AFF"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+                class="desktop"
+            >
+              <path fill="#fff" d="M0 0h16v16H0z" stroke="none"></path>
+              <path
+                  d="M8 10l2-2.054L8.077 6"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+              ></path>
+              <path
+                  d="M6 4.1V2h8v12H6v-1.65M9 8H2"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+              ></path>
+            </svg>
+            <span class="sign_text">Вход</span>
+          </button>
+        </div>
+      </div>
+      <SlideToggle v-slot="{ animationClass }">
+        <profile-menu
+            v-if="isAuthenticated"
+            v-show="active"
+            :class="animationClass"
+            @logout="logout"
+            :balance="balance"
+            :rate="rate"
+            :mode="mode"
+            :tab="tab"
+        />
+      </SlideToggle>
+    </div>
+  </div>
+</template>
+
+<script>
+import { profileDropDown } from "../../configs/profileDropDown";
+import SlideToggle from "../transitions/SlideToggle";
+import vClickOutside from "v-click-outside";
+import ProfileMenu from "./ProfileMenu";
+
+export default {
+  directives: {
+    clickOutside: vClickOutside.directive,
+  },
+  props: {
+    mode: {
+      type: String,
+      required: true,
+      validator: function (value) {
+        return ["prod", "dev", "staging"].indexOf(value) !== -1;
+      },
+    },
+    isAuthenticated: {
+      type: Boolean,
+      default: false,
+    },
+    email: {
+      type: String,
+      default: "",
+    },
+    loginUrl: {
+      type: String,
+      default: "",
+      required: true,
+    },
+    activeTabKey: {
+      type: String,
+      default: "",
+      required: true,
+    },
+    rate: {
+      type: String,
+      default: ""
+    },
+    balance: {
+      type: [Number, String],
+      default: 0
+    },
+    tab: {
+      type: String,
+      default: ""
+    }
+  },
+  components: {
+    ProfileMenu,
+    SlideToggle,
+  },
+  data() {
+    return {
+      profileDropDown,
+      active: false,
+      chosenElem: {
+        children: [],
+      },
+    };
+  },
+  mounted() {
+    const item = this.activeTabKey ? this.profileDropDown.find(el => el.key && el.key.includes(this.activeTabKey)) : null;
+    if(item && window && window.innerWidth > 850) {
+      this.chosenElem = item;
+      this.chosenElem.opened = true;
+    }
+  },
+  computed: {
+    someMobileOpened() {
+      return this.profileDropDown.filter(
+          (el) => el.opened && el.children.length > 0
+      );
+    },
+  },
+  methods: {
+    setShowModal(bool) {
+      this.$emit("setShowModal", bool);
+    },
+    logout() {
+      this.$emit("logout");
+    },
+    preventLink(disabled, e) {
+      if (disabled) {
+        e.preventDefault();
+      }
+    },
+    async showModal(url, name) {
+      if (name.includes("Текущий")) {
+        if (window.location.href.includes(url)) {
+          this.$emit("setIsReplenishModal", true);
+          this.setShowModal(true);
+        } else {
+          await window.open(url + "&modal=show", "_self");
+        }
+      }
+    },
+    handleClick(url, name) {
+      if (!name.includes("Текущий")) {
+        window.open(url, name === 'Избранные' ? '_blank' : '_self');
+      }
+    },
+    rotateItem(index) {
+      this.chosenElem = this.profileDropDown[index];
+      const array = this.profileDropDown;
+      array.forEach((el, idx) => {
+        if (index === idx) {
+          this.$set(el, 'opened', !el.opened);
+        } else this.$set(el, 'opened', false)
+      });
+    },
+    goAuth() {
+      const fullPath = encodeURIComponent(window.location.toString());
+      if (window) {
+        window.location.href = `${this.loginUrl}?url=${fullPath}`;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+a {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+svg {
+  transition: all 0.3s linear;
+}
+
+svg.rotated {
+  transform: rotate(180deg);
+}
+
+.gray-text {
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  color: #2c3e50;
+  padding: 10px 16px;
+  cursor: pointer;
+}
+
+.profile {
+  position: relative;
+
+  &__inner {
+    padding: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  &__item {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+    padding: 8px 0;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &-link {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+
+      &:first-child {
+        @media (max-width: 1025px) {
+          display: none;
+        }
+      }
+
+      &:nth-child(2) {
+        display: none;
+        @media (max-width: 1025px) {
+          display: flex;
+        }
+      }
+    }
+
+    span {
+      white-space: nowrap;
+      margin: 0 7px;
+    }
+
+    .arrow-svg {
+      transition: all 0.3s;
+      vertical-align: middle;
+      width: 16px;
+      height: 16px;
+      transform: rotate(0deg);
+
+      &.rotate {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .profile-menu {
+    //width: 368px;
+    //height: 100%;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    background-color: #fff;
+    box-shadow: 0px 3px 6px #959cb140;
+    border-radius: 2px;
+    z-index: 10000;
+    @media (max-width: 1025px) {
+      display: none;
+    }
+
+    &__items {
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 400;
+      color: #2c3e50;
+      cursor: pointer;
+
+      span.balance {
+        padding: 2px 8px;
+        color: #698096;
+        background: #ECEFF1;
+        border-radius: 100px;
+      }
+
+      .rate-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        color: #007aff;
+        font-size: 14px;
+        font-weight: 600;
+        span.rate {
+          color: #2C3E50;
+          font-size: 12px;
+        }
+      }
+
+      div:not(:last-child) > a > .gray-text {
+        border-bottom: 0.5px solid #bdc7ce;
+      }
+
+      div:not(:last-child) > .gray-text {
+        border-bottom: 0.5px solid #bdc7ce;
+
+        & + div {
+          padding: 10px 16px;
+        }
+      }
+
+      div
+      > .gray-text:not(.profile-menu__balance-link):not(.profile-menu__links) {
+        padding: 0;
+
+        a {
+          color: #2c3e50;
+
+          &:visited {
+            color: #2c3e50;
+          }
+        }
+      }
+    }
+
+    &__item__child {
+      padding: 0 16px 0 32px;
+      height: 40px;
+      display: flex;
+      border-top: 0.5px solid #bdc7ce;
+      align-items: center;
+
+      &:hover {
+        background: #2c3e500c;
+      }
+
+      span {
+        display: flex;
+        align-items: center;
+
+        svg {
+          margin-right: 5px;
+
+          path {
+            fill: #2c3e500c !important;
+          }
+        }
+      }
+    }
+
+    &__item__children {
+      padding: 0 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 40px;
+
+      &:hover {
+        background: #2c3e500c;
+      }
+
+      &.active {
+        background: #ECEFF1;
+        border-left: 3px solid #007aff;
+      }
+    }
+
+    &__balance-link {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      padding: 0 16px;
+
+      &:hover {
+        background: #2c3e500d;
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #eef0f5;
+      }
+    }
+
+    &__balance {
+      font-size: 14px;
+      font-weight: 600;
+      color: #007aff;
+      white-space: nowrap;
+    }
+
+    &__links {
+      display: flex;
+      align-items: center;
+      align-content: center;
+      height: 40px;
+      padding: 0 16px;
+
+      &:hover {
+        background: linear-gradient(0deg, rgba(236, 239, 241, 0.5), rgba(236, 239, 241, 0.5)), #FFFFFF;
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #eef0f5;
+      }
+    }
+  }
+}
+
+.sign {
+  height: 40px;
+  background: transparent;
+  border: none;
+  border-radius: 0 0 2px 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &:hover {
+    svg {
+      stroke: #71757a !important;
+    }
+
+    span {
+      color: #71757a;
+    }
+  }
+
+  &:active {
+    svg {
+      stroke: #9da3ac !important;
+    }
+
+    span {
+      color: #9da3ac;
+    }
+  }
+
+  svg {
+    margin-right: 8px;
+    fill: none !important;
+    stroke: #2c3e50 !important;
+    @media (max-width: 1025px) {
+      stroke: none !important;
+      margin-right: 24px;
+    }
+  }
+
+  span {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16px;
+    color: #2c3e50;
+    margin: 0 0;
+  }
+}
+
+.requests {
+  &__link {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    padding: 12px;
+    color: var(--newColor);
+    white-space: nowrap;
+    margin: 0 6px 0 0;
+    @media (max-width: 1025px) {
+      display: none;
+    }
+
+    svg {
+      vertical-align: middle;
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
+      margin-bottom: 2px;
+    }
+
+    span {
+      color: #2c3e50;
+      font-weight: 600;
+    }
+  }
+}
+
+.user {
+  display: none;
+  @media (max-width: 1025px) {
+    width: 24px;
+    height: 24px;
+    margin-right: 24px;
+    display: flex;
+  }
+}
+
+.exit-mobile {
+  display: none;
+  @media (max-width: 1025px) {
+    display: block;
+    width: 24px;
+    height: 24px;
+    margin-right: 12px;
+  }
+}
+
+.mobile-table {
+  display: none;
+  @media (max-width: 1025px) {
+    display: block;
+  }
+
+  &-head {
+    padding: 0 16px;
+    background: #f4f4f4;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 40px;
+
+    p {
+      font-weight: 600;
+      font-size: 17px;
+      line-height: 19px;
+      color: #2c3e50;
+    }
+
+    svg {
+      width: 18px;
+      height: 18px;
+      @media (max-width: 1025px) {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    &-chosen {
+      position: relative;
+
+      & > div {
+        position: absolute;
+      }
+
+      p {
+        text-align: center;
+        width: 100%;
+      }
+    }
+  }
+}
+
+.profile-menu-mobile {
+  height: 100%;
+
+  .bb > a,
+  .bb > a:visited {
+    color: #000;
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    height: 72%;
+  }
+
+  &__links,
+  &__item {
+    padding: 0 16px;
+    height: 52px;
+    border: 1px solid #9da3ac;
+    border-bottom: none;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+  }
+
+  &__balance-link {
+    padding: 0 16px;
+    height: 52px;
+    border: 1px solid #9da3ac;
+    border-bottom: none;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__balance {
+    color: #1e88e5;
+    font-size: 16px;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+
+    &-items {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      &__upper-text {
+        font-weight: normal;
+        font-size: 10px;
+        line-height: 14px;
+        color: #69797d;
+        margin-bottom: 4px;
+      }
+
+      &__bot-text {
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 16px;
+        color: #2c3e50;
+      }
+    }
+  }
+}
+
+.exit-mob {
+  background: #ffcd33;
+  border-radius: 2px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 16px;
+  color: #2c3e50;
+  margin: 16px 16px 0;
+
+  svg {
+    margin-right: 8px;
+    fill: none !important;
+  }
+}
+
+.bb {
+  &:last-child {
+    border-bottom: 1px solid #9da3ac;
+  }
+}
+
+.button-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.sign_text {
+  @media (max-width: 1025px) {
+    display: none;
+  }
+}
+</style>