Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | import React from 'react'
import { useNavigate } from 'react-router-dom'
import {
CAvatar,
CBadge,
CDropdown,
CDropdownDivider,
CDropdownHeader,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
} from '@coreui/react'
import {
cilBell,
cilCreditCard,
cilCommentSquare,
cilEnvelopeOpen,
cilFile,
cilLockLocked,
cilSettings,
cilTask,
cilUser,
} from '@coreui/icons'
import CIcon from '@coreui/icons-react'
import avatar8 from './../../assets/images/avatars/8.jpg'
const AppHeaderDropdown = () => {
const navigate = useNavigate()
const handleLogout = () => {
localStorage.removeItem('token')
localStorage.removeItem('user')
navigate('/login')
}
return (
<CDropdown variant="nav-item">
<CDropdownToggle placement="bottom-end" className="py-0 pe-0" caret={false}>
<CAvatar src={avatar8} size="md" />
</CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownHeader className="bg-body-secondary fw-semibold mb-2">Account</CDropdownHeader>
<CDropdownItem href="#">
<CIcon icon={cilBell} className="me-2" />
Updates
<CBadge color="info" className="ms-2">42</CBadge>
</CDropdownItem>
<CDropdownItem href="#">
<CIcon icon={cilEnvelopeOpen} className="me-2" />
Messages
<CBadge color="success" className="ms-2">42</CBadge>
</CDropdownItem>
<CDropdownItem href="#">
<CIcon icon={cilTask} className="me-2" />
Tasks
<CBadge color="danger" className="ms-2">42</CBadge>
</CDropdownItem>
<CDropdownItem href="#">
<CIcon icon={cilCommentSquare} className="me-2" />
Comments
<CBadge color="warning" className="ms-2">42</CBadge>
</CDropdownItem>
<CDropdownHeader className="bg-body-secondary fw-semibold my-2">Settings</CDropdownHeader>
<CDropdownItem href="#">
<CIcon icon={cilUser} className="me-2" />
Profile
</CDropdownItem>
<CDropdownItem href="#">
<CIcon icon={cilSettings} className="me-2" />
Settings
</CDropdownItem>
<CDropdownItem href="#">
<CIcon icon={cilCreditCard} className="me-2" />
Payments
<CBadge color="secondary" className="ms-2">42</CBadge>
</CDropdownItem>
<CDropdownItem href="#">
<CIcon icon={cilFile} className="me-2" />
Projects
<CBadge color="primary" className="ms-2">42</CBadge>
</CDropdownItem>
<CDropdownDivider />
<CDropdownItem onClick={handleLogout}>
<CIcon icon={cilLockLocked} className="me-2" />
Logout
</CDropdownItem>
</CDropdownMenu>
</CDropdown>
)
}
export default AppHeaderDropdown |