Sivadass N Sivadass N - 3 months ago 28
CSS Question

React JS Hamburger Menu not Collapsing back after Clicking menu item

I am building a SPA using react-router. I have made a responsive menu for it. But one thing I want to achieve is to collapse the menu after a menu item is clicked. I have no idea on how to implement this, could anybody please shed light on me?

var { Router, Route, IndexRoute, IndexLink, Link } = ReactRouter;

class App extends React.Component {
constructor() {
super();
this.state = {
menuVisible: false
};
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState({menuVisible: !this.state.menuVisible});
}
render() {
return (
<div className="wrapper">
<div className="header">
<div className="topbar">
<a className={"menu"+" "+this.state.menuVisible} onClick={this.handleClick}><i className="zmdi zmdi-menu"></i></a>
<a className="logo">Dummy SPA</a>
</div>
<div className={"menubar"+" "+this.state.menuVisible}>
<ul>
<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
<li><Link to="deals" activeClassName="active">Deals</Link></li>
<li><Link to="orders" activeClassName="active">Orders</Link></li>
<li><Link to="support" activeClassName="active">Support</Link></li>
</ul>
</div>
</div>

<div className="container">
{this.props.children}
</div>
</div>
);
}
}

//Dummy Pages
class Home extends React.Component {
render() {
return (
<div className="page">
<h1>Home</h1>
</div>
);
}
}

class Deals extends React.Component {
render() {
return (
<div className="page">
<h1>Deals</h1>
</div>
);
}
}

class Orders extends React.Component {
render() {
return (
<div className="page">
<h1>Orders</h1>
</div>
);
}
}

class Support extends React.Component {
render() {
return (
<div className="page">
<h1>Support</h1>
</div>
);
}
}

//Router Rendering
ReactDOM.render(
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="deals" component={Deals}/>
<Route path="orders" component={Orders}/>
<Route path="support" component={Support} />
</Route>
</Router>,
document.getElementById('app')
);


Codepen Demo is here.

Answer

You already have a click handler for the menu icon which show/hides the menu on click. I would simply add the same handler to each menu item:

render() {
    return (
        <div className="wrapper">
            <div className="header">
                <div className="topbar">
                    <a className={"menu"+" "+this.state.menuVisible} onClick={this.handleClick}><i className="zmdi zmdi-menu"></i></a>
                    <a className="logo">Dummy SPA</a>
                </div>
                <div className={"menubar"+" "+this.state.menuVisible}>
                    <ul>
                        <li><IndexLink to="/" activeClassName="active" onClick={this.handleClick}>Home</IndexLink></li>
                        <li><Link to="deals" activeClassName="active" onClick={this.handleClick}>Deals</Link></li>
                        <li><Link to="orders" activeClassName="active" onClick={this.handleClick}>Orders</Link></li>
                        <li><Link to="support" activeClassName="active" onClick={this.handleClick}>Support</Link></li>
                    </ul>
                </div>
            </div>

            <div className="container">
                {this.props.children}
            </div>
        </div>
    );