woothu
79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<template>
|
|
<CDropdown
|
|
nav
|
|
no-caret
|
|
class="c-header-nav-items"
|
|
placement="bottom-end"
|
|
add-menu-classes="pt-0"
|
|
>
|
|
<template #toggler>
|
|
<CHeaderNavItem only-link>
|
|
<div class="c-avatar">
|
|
<img
|
|
src="img/avatars/6.jpg"
|
|
class="c-avatar-img "
|
|
/>
|
|
</div>
|
|
</CHeaderNavItem>
|
|
</template>
|
|
<CDropdownHeader tag="div" class="text-center" color="light">
|
|
<strong>Account</strong>
|
|
</CDropdownHeader>
|
|
<CDropdownItem>
|
|
<i class="cui-bell mr-2"/> Updates
|
|
<CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownItem>
|
|
<i class="cui-envelope-open mr-2" /> Messages
|
|
<CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownItem>
|
|
<i class="cui-task mr-2" /> Tasks
|
|
<CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownItem>
|
|
<i class="cui-comment-square mr-2" /> Comments
|
|
<CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownHeader
|
|
tag="div"
|
|
class="text-center"
|
|
color="light"
|
|
>
|
|
<strong>Settings</strong>
|
|
</CDropdownHeader>
|
|
<CDropdownItem>
|
|
<i class="cui-user mr-2" /> Profile
|
|
</CDropdownItem>
|
|
<CDropdownItem>
|
|
<i class="cui-wrench mr-2" /> Settings
|
|
</CDropdownItem>
|
|
<CDropdownItem>
|
|
<i class="cui-dollar mr-2" /> Payments
|
|
<CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownItem>
|
|
<i class="cui-file mr-2" /> Projects
|
|
<CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownDivider/>
|
|
<CDropdownItem>
|
|
<i class="cui-shield mr-2" /> Lock Account
|
|
</CDropdownItem>
|
|
<CDropdownItem>
|
|
<i class="cui-lock-locked mr-2" /> Logout
|
|
</CDropdownItem>
|
|
</CDropdown>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'TheHeaderDropdownAccnt',
|
|
data () {
|
|
return {
|
|
itemsCount: 42
|
|
}
|
|
}
|
|
}
|
|
</script>
|