99 lines
3.9 KiB
JavaScript
99 lines
3.9 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {
|
|
Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavbarBrand, NavbarToggler, NavDropdown, NavItem, NavLink
|
|
} from 'reactstrap';
|
|
|
|
class Header extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.toggle = this.toggle.bind(this);
|
|
this.state = {
|
|
dropdownOpen: false
|
|
};
|
|
}
|
|
|
|
toggle() {
|
|
this.setState({
|
|
dropdownOpen: !this.state.dropdownOpen
|
|
});
|
|
}
|
|
|
|
sidebarToggle(e) {
|
|
e.preventDefault();
|
|
document.body.classList.toggle('sidebar-hidden');
|
|
}
|
|
|
|
sidebarMinimize(e) {
|
|
e.preventDefault();
|
|
document.body.classList.toggle('sidebar-minimized');
|
|
}
|
|
|
|
mobileSidebarToggle(e) {
|
|
e.preventDefault();
|
|
document.body.classList.toggle('sidebar-mobile-show');
|
|
}
|
|
|
|
asideToggle(e) {
|
|
e.preventDefault();
|
|
document.body.classList.toggle('aside-menu-hidden');
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<header className="app-header navbar">
|
|
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>☰</NavbarToggler>
|
|
<NavbarBrand href="#"></NavbarBrand>
|
|
<NavbarToggler className="d-md-down-none" onClick={this.sidebarToggle}>☰</NavbarToggler>
|
|
<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>
|
|
<NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
|
|
<DropdownToggle nav caret>
|
|
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
|
|
<span className="d-md-down-none">admin</span>
|
|
</DropdownToggle>
|
|
<DropdownMenu right>
|
|
<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>
|
|
</NavDropdown>
|
|
</Nav>
|
|
<NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>☰</NavbarToggler>
|
|
</header>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Header;
|