rstarter-supporthq
Version:
55 lines (51 loc) • 2.4 kB
JavaScript
import React from 'react';
import {Link} from 'react-router-dom';
export default class Topmenu extends React.PureComponent{
constructor(props) {
super(props);
this.state={
menuItems:[]
}
this.forceResetTopMenue=this.forceResetTopMenue.bind(this);
}
forceResetTopMenue(menu){
this.setState({menuItems:menu});
}
componentDidMount(){
this.setState({menuItems:this.props.menuItems});
}
render() {
return (
<nav className="navbar navbar-expand-sm bg-primary navbar-dark">
<ul className="navbar-nav">
{this.state.menuItems.map((menu,index)=>{
let itemClass=(menu.hasChild)?"nav-item dropdown":"nav-item ";
let itemLink=(menu.hasChild)?"nav-link dropdown-toggle":"nav-link ";
return <li className={itemClass} key={index}>
<Link className={itemLink} to={menu.link} onClick={(e)=>{
if (menu.hasChild) {
e.preventDefault();
$(".nav-item.dropdown .dropdown-menu").each(function () {
if ($(this).hasClass("show"))
$(this).removeClass("show")
})
const mainMenu=$($(e.target).parent().find('.dropdown-menu')[0]);
if (mainMenu.hasClass("show"))
mainMenu.removeClass("show")
else
mainMenu.addClass("show")
}
}}>{menu.label} </Link>
{menu.hasChild? <div className="dropdown-menu">
{menu.menus.map((submenu,subindex)=>{
return <Link className="dropdown-item" to={submenu.link}>{submenu.label}</Link>
})
}
</div>:null}
</li>
})}
</ul>
</nav>
);
}
}