109 lines
3.7 KiB
JavaScript
109 lines
3.7 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {connect} from 'react-redux';
|
|
import {Link} from 'react-router-dom';
|
|
import {
|
|
Collapse,
|
|
Navbar,
|
|
NavbarToggler,
|
|
NavbarBrand,
|
|
Nav,
|
|
NavItem,
|
|
NavLink
|
|
} from 'reactstrap';
|
|
import {fetchCartCount} from '../../actions/cart/cartActions';
|
|
import {resetActiveSubModule} from '../../actions/page/pageActions';
|
|
import CartIcon from '../../containers/cart/components/CartIcon.jsx';
|
|
import Submenu from './Submenu.jsx';
|
|
import './menu.css';
|
|
import logoWhite from '../../svg/logoWhite.svg';
|
|
|
|
class Menu extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.toggle = this.toggle.bind(this);
|
|
this.toggleSubmenu = this.toggleSubmenu.bind(this);
|
|
this.toggleDropdown = this.toggleDropdown.bind(this);
|
|
this.state = {
|
|
isOpen: false,
|
|
isSubmenuOpen: false,
|
|
dropdownOpen: false
|
|
};
|
|
}
|
|
|
|
toggle() {
|
|
this.setState({
|
|
isOpen: !this.state.isOpen
|
|
});
|
|
}
|
|
|
|
toggleSubmenu() {
|
|
this.setState({
|
|
isSubmenuOpen: !this.state.isSubmenuOpen
|
|
});
|
|
}
|
|
|
|
toggleDropdown() {
|
|
this.setState({
|
|
dropdownOpen: !this.state.dropdownOpen
|
|
});
|
|
}
|
|
|
|
isInMenu(module) {
|
|
return parseInt(module.isInMenu, 10) === 1;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.props.dispatch(fetchCartCount());
|
|
}
|
|
|
|
onModuleClick(moduleName){
|
|
this.props.dispatch(resetActiveSubModule());
|
|
this.props.addActiveClass(moduleName);
|
|
}
|
|
|
|
render() {
|
|
const {wiaasModules} = this.props;
|
|
|
|
return (
|
|
<div>
|
|
<Navbar id="main-menu-bar" className="navigation-bar" dark expand="md">
|
|
<NavbarBrand tag={Link} to="/"><img className="logo-image" src={logoWhite} alt="WIAAS" /></NavbarBrand>
|
|
<NavbarToggler onClick={this.toggle}/>
|
|
<Collapse isOpen={this.state.isOpen} navbar>
|
|
<Nav className="mr-auto" navbar>
|
|
{
|
|
(wiaasModules && wiaasModules.modules) &&
|
|
wiaasModules.modules.filter(this.isInMenu).map((module, index) =>
|
|
<NavItem key={index}
|
|
id={"nav-button-" + module.url}
|
|
className={(this.props.activeModule === module.url) ? "navbar-button active" : "navbar-button"}
|
|
onClick={() => this.onModuleClick(module.url)}>
|
|
<NavLink tag={Link} to={'/' + module.url}>{module.menuName}</NavLink>
|
|
</NavItem>
|
|
)
|
|
}
|
|
</Nav>
|
|
<Nav className="nav-btn-cart navbar-right" navbar>
|
|
<NavItem id="nav-button-cart" className="navbar-button">
|
|
<NavLink tag={Link} to="/cart">
|
|
<CartIcon cartCount={this.props.cartCount} />
|
|
<span className="fa fa-shopping-cart cart-icon"></span>
|
|
<span className="cart-label">Cart</span>
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
</Collapse>
|
|
</Navbar>
|
|
<Submenu activeModule={this.props.activeModule}/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
const mapStateToProps = (state) => ({
|
|
wiaasModules: state.auth.modules,
|
|
cartCount: state.cartReducer.cartCount
|
|
});
|
|
|
|
export default connect(mapStateToProps)(Menu);
|