adata-ui 0.3.73 → 0.3.74

package/src/components/Header/ProfileOld.vue

@@ -1,781 +1,781 @@
-<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 }">
-        <div
-            class="profile-menu"
-            v-show="active"
-            :class="animationClass"
-        >
-          <div class="profile-menu__inner">
-            <div class="profile-menu__items">
-              <div v-for="(elem, index) in profileDropDown" :key="index">
-                <a
-                    :href="elem[mode]"
-                    :class="
-                    elem.link
-                      ? 'profile-menu__balance-link'
-                      : 'profile-menu__links'
-                  "
-                    class="gray-text"
-                    v-if="elem[mode]"
-                    @click="preventLink(elem.disabled, $event)"
-                    onclick="`return false`"
-                >
-                  <div :class="{'rate-item': index === 0}">
-                    <span v-show="index === 0" class="rate">
-                      Тариф {{ rate }}
-                    </span> {{ elem.name }} <span v-show="index === 1" class="balance">{{ balance || 0 }} ₸</span>
-                  </div>
-                  <span
-                      v-show="elem.link"
-                      @click="showModal(elem[mode], elem.name)"
-                      class="profile-menu__balance"
-                  >
-                    {{ elem.link }}
-                  </span>
-                </a>
-                <div
-                    v-if="elem.children"
-                    @click="rotateItem(index)"
-                    class="gray-text profile-menu__item"
-                >
-                  <div :class="{ active: elem.opened }" class="profile-menu__item__children">
-                    {{ elem.name }}
-                    <span v-if="elem.children.length > 0">
-                      <svg
-                          width="12"
-                          height="8"
-                          viewBox="0 0 12 8"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                          :class="{ rotated: elem.opened }"
-                      >
-                        <path
-                            d="M1 1.5L6 6.5L11 1.5"
-                            stroke="#69797D"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                  <SlideToggle
-                      v-slot="{ animationClass }"
-                      :class="animationClass"
-                  >
-                    <div v-if="elem.opened">
-                      <template v-for="(child, idx) in elem.children">
-                        <div
-                            class="profile-menu__item__child"
-                            :key="idx + 'link'"
-                            v-if="child[mode]"
-                            @click="handleClick(child[mode], child.name)"
-                        >
-                          <span>
-                            {{ child.name }}
-                          </span>
-                        </div>
-                      </template>
-                    </div>
-                  </SlideToggle>
-                </div>
-              </div>
-            </div>
-
-          </div>
-        </div>
-      </SlideToggle>
-    </div>
-  </div>
-</template>
-
-<script>
-import { profileDropDown } from "../../configs/profileDropDown";
-import SlideToggle from "../transitions/SlideToggle";
-import vClickOutside from "v-click-outside";
-
-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
-    }
-  },
-  components: {
-    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;
-      }
-    }
-  }
-}
-
-.exit {
-  background: #007AFF;
-  height: 40px;
-  border-radius: 0 0 2px 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  &:hover {
-    background: #9da3ac;
-    color: #fff;
-  }
-
-  &:hover svg {
-    stroke: #fff;
-    background: #9da3ac;
-  }
-
-  svg {
-    margin-right: 8px;
-    background: #007AFF;
-    fill: none !important;
-    stroke: #fff;
-    transition: all 0s;
-  }
-
-  &:active {
-    background: #0055bb;
-    color: #fff;
-  }
-
-  &:active svg {
-    stroke: #fff;
-    background: #0055bb;
-  }
-
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 16px;
-  color: #fff;
-}
-
-.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 }">
+        <div
+            class="profile-menu"
+            v-show="active"
+            :class="animationClass"
+        >
+          <div class="profile-menu__inner">
+            <div class="profile-menu__items">
+              <div v-for="(elem, index) in profileDropDown" :key="index">
+                <a
+                    :href="elem[mode]"
+                    :class="
+                    elem.link
+                      ? 'profile-menu__balance-link'
+                      : 'profile-menu__links'
+                  "
+                    class="gray-text"
+                    v-if="elem[mode]"
+                    @click="preventLink(elem.disabled, $event)"
+                    onclick="`return false`"
+                >
+                  <div :class="{'rate-item': index === 0}">
+                    <span v-show="index === 0" class="rate">
+                      Тариф {{ rate }}
+                    </span> {{ elem.name }} <span v-show="index === 1" class="balance">{{ balance || 0 }} ₸</span>
+                  </div>
+                  <span
+                      v-show="elem.link"
+                      @click="showModal(elem[mode], elem.name)"
+                      class="profile-menu__balance"
+                  >
+                    {{ elem.link }}
+                  </span>
+                </a>
+                <div
+                    v-if="elem.children"
+                    @click="rotateItem(index)"
+                    class="gray-text profile-menu__item"
+                >
+                  <div :class="{ active: elem.opened }" class="profile-menu__item__children">
+                    {{ elem.name }}
+                    <span v-if="elem.children.length > 0">
+                      <svg
+                          width="12"
+                          height="8"
+                          viewBox="0 0 12 8"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          :class="{ rotated: elem.opened }"
+                      >
+                        <path
+                            d="M1 1.5L6 6.5L11 1.5"
+                            stroke="#69797D"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <SlideToggle
+                      v-slot="{ animationClass }"
+                      :class="animationClass"
+                  >
+                    <div v-if="elem.opened">
+                      <template v-for="(child, idx) in elem.children">
+                        <div
+                            class="profile-menu__item__child"
+                            :key="idx + 'link'"
+                            v-if="child[mode]"
+                            @click="handleClick(child[mode], child.name)"
+                        >
+                          <span>
+                            {{ child.name }}
+                          </span>
+                        </div>
+                      </template>
+                    </div>
+                  </SlideToggle>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </SlideToggle>
+    </div>
+  </div>
+</template>
+
+<script>
+import { profileDropDown } from "../../configs/profileDropDown";
+import SlideToggle from "../transitions/SlideToggle";
+import vClickOutside from "v-click-outside";
+
+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
+    }
+  },
+  components: {
+    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;
+      }
+    }
+  }
+}
+
+.exit {
+  background: #007AFF;
+  height: 40px;
+  border-radius: 0 0 2px 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &:hover {
+    background: #9da3ac;
+    color: #fff;
+  }
+
+  &:hover svg {
+    stroke: #fff;
+    background: #9da3ac;
+  }
+
+  svg {
+    margin-right: 8px;
+    background: #007AFF;
+    fill: none !important;
+    stroke: #fff;
+    transition: all 0s;
+  }
+
+  &:active {
+    background: #0055bb;
+    color: #fff;
+  }
+
+  &:active svg {
+    stroke: #fff;
+    background: #0055bb;
+  }
+
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+  color: #fff;
+}
+
+.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>