1

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.

2
  • 1
    <IndexLink to="/" activeClassName="active" onClick={this.handleClick} >Home</IndexLink> Add HandleClick event for each IndexLink or else add Handleclick event in <ul> tag
    – tsb
    Aug 18, 2016 at 11:14
  • @tsb yeah it worked man, thanks :)
    – Sivadass N
    Aug 18, 2016 at 11:23

1 Answer 1

1

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>
    );
1
  • I didn't think that the solution will be this much simpler, thanks man :)
    – Sivadass N
    Aug 18, 2016 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.