79 lines
3.6 KiB
JavaScript
79 lines
3.6 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { AppAsideToggler, AppHeaderDropdown, AppNavbarBrand, AppSidebarToggler } from '@coreui/react-dev';
|
|
|
|
const propTypes = {
|
|
children: PropTypes.node,
|
|
};
|
|
|
|
const defaultProps = {};
|
|
|
|
class FullHeader extends Component {
|
|
render() {
|
|
|
|
const { children, ...attributes } = this.props;
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<AppSidebarToggler className="d-lg-none" display="md" mobile />
|
|
<AppNavbarBrand
|
|
full={{ src: process.env.PUBLIC_URL + 'assets/img/brand/logo.svg', width: 89, height: 25, alt: 'CoreUI Logo' }}
|
|
minimized={{ src: process.env.PUBLIC_URL + 'assets/img/brand/sygnet.svg', width: 30, height: 30, alt: 'CoreUI Logo' }}
|
|
/>
|
|
<AppSidebarToggler className="d-md-down-none" display="lg" />
|
|
|
|
<Nav className="d-md-down-none" navbar>
|
|
<NavItem className="px-3">
|
|
<NavLink href="/">Dashboard</NavLink>
|
|
</NavItem>
|
|
<NavItem className="px-3">
|
|
<NavLink href="#">Users</NavLink>
|
|
</NavItem>
|
|
<NavItem className="px-3">
|
|
<NavLink href="#">Settings</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
<Nav className="ml-auto" navbar>
|
|
<NavItem className="d-md-down-none">
|
|
<NavLink href="#"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
|
|
</NavItem>
|
|
<NavItem className="d-md-down-none">
|
|
<NavLink href="#"><i className="icon-list"></i></NavLink>
|
|
</NavItem>
|
|
<NavItem className="d-md-down-none">
|
|
<NavLink href="#"><i className="icon-location-pin"></i></NavLink>
|
|
</NavItem>
|
|
<AppHeaderDropdown>
|
|
<DropdownToggle nav>
|
|
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
|
|
</DropdownToggle>
|
|
<DropdownMenu right style={{ right: 'auto' }}>
|
|
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
|
|
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
|
|
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
|
|
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
|
|
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
|
|
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
|
|
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
|
|
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
|
|
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
|
|
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
|
|
<DropdownItem divider />
|
|
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
|
|
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
|
|
</DropdownMenu>
|
|
</AppHeaderDropdown>
|
|
</Nav>
|
|
<AppAsideToggler className="d-md-down-none" />
|
|
<AppAsideToggler className="d-lg-none" mobile />
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
FullHeader.propTypes = propTypes;
|
|
FullHeader.defaultProps = defaultProps;
|
|
|
|
export default FullHeader; |