How to make react-sidebar close when any link is clicked?

Question

I'm new to React, trying to make this component work: https://github.com/balloob/react-sidebar

It works, except the sidebar does not close when a link is followed. How do I make a click on a sidebar link close the sidebar?

from index.js:

 render((
      <Router history={hashHistory}>
        <Route component={Nav}>
          <Route path="/pages/page1" component={Page1}/>
          <Route path="/pages/page2" component={Page2}/>
          <Route path="/pages/about" component={About} />
          <Route path="/users/firsttime" component={UsersFirsttime} />
          <Redirect from="/" to="/users/firsttime" />
        </Route>
      </Router>
    ), document.getElementById('app'));

from nav.js:

  render () {
    const sidebarContent = <SidebarContent />;

    const contentHeader = <span>
        {this.state.docked || <a onClick={this.menuButtonClick} href="javascript:void(0);" style={styles.contentHeaderMenuLink}>=</a>}
        <span>This title</span>
      </span>;

    const sidebarProps = {
      sidebar: sidebarContent,
      docked: this.state.docked,
      sidebarClassName: 'custom-sidebar-class',
      open: this.state.open,
      touch: this.state.touch,
      shadow: this.state.shadow,
      pullRight: this.state.pullRight,
      touchHandleWidth: this.state.touchHandleWidth,
      dragToggleDistance: this.state.dragToggleDistance,
      transitions: this.state.transitions,
      onSetOpen: this.onSetOpen,
    };

    return (
      <Sidebar {...sidebarProps} >
        <MaterialTitlePanel title={contentHeader}>
          {this.props.children}
        </MaterialTitlePanel>
      </Sidebar>
    );
  }

from sidebar_content.js:

const SidebarContent = (props) => {
  // const style = props.style ? {...styles.sidebar, ...props.style} : styles.sidebar;
  const style = props.style ? update(styles.sidebar, { $merge: props.style }) : styles.sidebar;

  // const links = [];

  const handle = () => {
    console.log('handle');
  };

  return (
    <MaterialTitlePanel title="Travel Guide Mobi" style={style}>
      <div style={styles.content}>
        <Link to="/pages/page1" >Page 1</Link>
        <div style={styles.divider} />
        <a key="key1" href="#" style={styles.sidebarLink}>Cities & Events</a>
        <a key="key2" href="#" style={styles.sidebarLink}>Set Travel Plans</a>
        <div style={styles.divider} />
        <a key="key3" href="#" style={styles.sidebarLink}>Edit Profile</a>
        <a key="key4" href="#" style={styles.sidebarLink}>Logout</a>
      </div>
    </MaterialTitlePanel>
  );
};

I thought maybe write something like <Link to="/pages/page1" onClick={self.props.closeMenu}>Page 1</Link> but I'm not sure how to do it exactly?

Answer 1

What you are thinking is correct. You can have a boolean state variable in Nav component which decides the visibility of the sidebar.

Nav.js

class Nav extends Component {
    constructor() {
        super()
        this.state = {showSidebar: true} // Initially we want it to be visible
    }

    toggleSidebar = () => {
        this.setState({showSidebar: !this.state.showSidebar})
    }

    render() {
        return <Sidebar 
                 toggleSidebar={this.toggleSidebar}
                 showSidebar={this.state.showSidebar}
               />
    }
}

Sidebar.js

class Sidebar extends Component {
    render() {
        const {toggleSidebar, showSidebar} = this.props
        return(
            <div>
                <Link to="/pages/page1" onClick={toggleSidebar}>Page 1</Link>
                {showSidebar?Code for open sidebar:Code for closed sidebar}
            </div>
        )
    }
}

You can obviously change the conditional rendering part. For example if you want to handle it through css, you can change the className dynamically depending upon the value of sidebarVisible variable.

Hope this helps :)