initial

apps/client/components/profile-dropdown.vue

@@ -0,0 +1,92 @@
+<template>
+  <UiDropdown
+    v-if="authenticated"
+    class="profile-dropdown"
+    dropdown-class="profile-dropdown__content"
+    placement="bottom-end"
+    trigger="hover"
+    :offset="12"
+    teleport
+  >
+    <template #default="{ isActive }">
+      <UiButton class="profile-dropdown__trigger" icon="circle-userpic" :state="isActive ? 'hover' : undefined" />
+    </template>
+
+    <template #dropdown>
+      <UiDropdownItem class="mb-12" @click="navigateTo('/2fa')">
+        <template #icon>
+          <UiIconSProtection class="text-clr-cyan-400" />
+        </template>
+
+        <span>Безопасность</span>
+      </UiDropdownItem>
+
+      <UiDropdownItem class="mb-12" @click="navigateTo('/verification/status')">
+        <template #icon>
+          <UiIconSOverview class="text-clr-cyan-400" />
+        </template>
+
+        <span>Лимиты</span>
+      </UiDropdownItem>
+
+      <UiDropdownItem @click="navigateTo('/settings')">
+        <template #icon>
+          <UiIconSSettings class="text-clr-cyan-400" />
+        </template>
+
+        <span>Настройки</span>
+      </UiDropdownItem>
+
+      <UiDropdownSeparator />
+
+      <UiDropdownItem @click="logout">
+        <template #icon>
+          <UiIconSExit class="text-clr-grey-400" />
+        </template>
+
+        <span>Logout</span>
+      </UiDropdownItem>
+    </template>
+  </UiDropdown>
+</template>
+
+<script setup>
+const { logout, authenticated } = useAuth()
+</script>
+
+<style lang="scss">
+.profile-dropdown {
+  cursor: pointer;
+
+  &__trigger {
+    --button-color: #{$clr-grey-500};
+    --button-background: #{$clr-grey-200};
+    --button-hover-color: #{$clr-white};
+    --button-active-color: #{$clr-white};
+  }
+
+  &__content {
+    @include txt-s-m('dropdown-item', true);
+
+    --dropdown-item-padding: 8px 12px;
+
+    position: relative;
+    color: $clr-grey-600;
+    width: 233px;
+    padding: 16px !important;
+    box-shadow: 0px 4px 4px 0px #6C86AD40;
+
+    &::before {
+      content: '';
+      width: 16px;
+      height: 16px;
+      transform: rotateZ(45deg);
+      position: absolute;
+      top: -8px;
+      right: 12px;
+      background-color: $clr-white;
+      border-radius: 2px;
+    }
+  }
+}
+</style>