93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
<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>
|