Łukasz Holeczek
60 lines
2.0 KiB
Vue
60 lines
2.0 KiB
Vue
<template>
|
|
<CDropdown variant="nav-item">
|
|
<CDropdownToggle placement="bottom-end" class="py-0" :caret="false">
|
|
<CAvatar :src="avatar" size="md"/>
|
|
</CDropdownToggle>
|
|
<CDropdownMenu>
|
|
<CDropdownHeader tag="div" class="text-center" color="light">
|
|
<strong>Account</strong>
|
|
</CDropdownHeader>
|
|
<CDropdownItem>
|
|
<CIcon icon="cil-bell" /> Updates
|
|
<CBadge color="info" class="ms-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownItem>
|
|
<CIcon icon="cil-envelope-open" /> Messages
|
|
<CBadge color="success" class="ms-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownItem>
|
|
<CIcon icon="cil-task" /> Tasks
|
|
<CBadge color="danger" class="ms-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownItem>
|
|
<CIcon icon="cil-comment-square" /> Comments
|
|
<CBadge color="warning" class="ms-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownHeader tag="div" class="text-center" color="light">
|
|
<strong>Settings</strong>
|
|
</CDropdownHeader>
|
|
<CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
|
|
<CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
|
|
<CDropdownItem>
|
|
<CIcon icon="cil-dollar" /> Payments
|
|
<CBadge color="secondary" class="ms-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownItem>
|
|
<CIcon icon="cil-file" /> Projects
|
|
<CBadge color="primary" class="ms-auto">{{ itemsCount }}</CBadge>
|
|
</CDropdownItem>
|
|
<CDropdownDivider />
|
|
<CDropdownItem>
|
|
<CIcon icon="cil-shield-alt" /> Lock Account
|
|
</CDropdownItem>
|
|
<CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
|
|
</CDropdownMenu>
|
|
</CDropdown>
|
|
</template>
|
|
|
|
<script>
|
|
import avatar from './../assets/images/avatars/8.jpg'
|
|
export default {
|
|
name: "AppHeaderDropdownAccnt",
|
|
data() {
|
|
return {
|
|
avatar: avatar,
|
|
itemsCount: 42,
|
|
};
|
|
},
|
|
};
|
|
</script>
|