Skip to content

Instantly share code, notes, and snippets.

@gagamil

gagamil/NavBar.js

Created January 6, 2018 10:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gagamil/5ca51ecda0cefc16518c7928918c787b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gagamil/5ca51ecda0cefc16518c7928918c787b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
NavBar.js
const NavBar = props => {
return(
<nav className="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a className="navbar-brand" href="#">Top navbar</a>
<__MenuToggleButton onToggle={props.toggle} show={props.isShowing}/>
<div className={`${props.show} collapse navbar-collapse`}>
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
)
}
export default convertToToggable(NavBar);
function convertToToggable(WrappedComponent){
return class ToggableComponent extends Component{
constructor(props){
super(props);
this.state = {showMenu:false};
}
toggle(){
this.setState({showMenu:!this.state.showMenu});
}
render(){
const show = this.state.showMenu ? "show" : "";
return(
<WrappedComponent show={show} isShowing={this.state.showMenu} toggle={this.toggle.bind(this)}/>
)
}
}
}
@gagamil
Copy link
Author

gagamil commented Jan 6, 2018

Related to my article

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment