Semantic-ui-react: Closing sidebar by clicking on the page

[andrewleith]

Is there a way to close a sidebar by clicking on the page? The official semantic-ui supports this out of the box and is configurable via a closable setting.

Is there something I can use in this library to do it?

[andrewleith]

I modified your sidebar example to do the following and it seems to meet my needs. For the 'ESC' keypress I am adding a keypress listener at the document level when the sidebar opens, and then removing it when it closes. For the click, I specifically target the pusher element. Any clicks on it will close the sidebar.

Targeting the DOM like this doesn't feel particularly in line with react, so there probably is a cleaner way to do this. In the meantime, this may help someone.

class SidebarLeftOverlay2 extends Component {
  state = { visible: false }

  toggleVisibility = () => this.setState({ visible: !this.state.visible })

  componentWillUpdate(nextProps, nextState) {
    // when the menu becomes visible, setup some handlers so we can close the menu easily
    if (nextState.visible == true) {
      document.addEventListener('keydown', this.handleKeyPress);
      document.querySelector('.pusher').addEventListener('click', this.handleClick);
    }
    else {
      document.removeEventListener('keydown', this.handleKeyPress);
      document.querySelector('.pusher').removeEventListener('click', this.handleClick);
    }

  }

  handleClick = () => {
    if (this.state.visible) {
      this.setState({ visible: false });
    }
  }
  handleKeyPress = (e) => {
    if(e.keyCode === 27 && this.state.visible) {
      this.setState({ visible: false })
    }
  }

  render() {
    const { visible } = this.state
    return (
      <div>
        <Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
        <Sidebar.Pushable as={Segment}>
          <Sidebar as={Menu} animation='overlay' width='thin' visible={visible} icon='labeled' vertical inverted>
            <Menu.Item name='home'>
              <Icon name='home' />
              Home
            </Menu.Item>
            <Menu.Item name='gamepad'>
              <Icon name='gamepad' />
              Games
            </Menu.Item>
            <Menu.Item name='camera'>
              <Icon name='camera' />
              Channels
            </Menu.Item>
          </Sidebar>
          <Sidebar.Pusher>
            <Segment basic>
              <Header as='h3'>Application Content</Header>
              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
            </Segment>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </div>
    )
  }
}

[levithomason]

We should certainly support closing by click outside and put this behind a prop called closable. We use a similar method in the Dropdown (state + listeners) as you've proposed here.

This is ready to implement. I've labeled this issue accordingly, thanks for the report.

[codeaid]

One easy solution I found while playing with layouts is to add an onClick event listener to the Sidebar.Pusher element:

<Sidebar.Pusher onClick={this.hideSidebar}>

I've not tested this extensively but seems to work well.

[theweekendgeek]

@codeaid Just implemented this, seems to work very well. I'll keep an eye on it while I continue developing.

[FakhruddinAbdi]

@levithomason any update about supporting closable props ?

Its really terrible solution to wrap whole application into pusher div just for a side bar.

[levithomason]

No update. Yes, it is terrible. Please submit a PR to fix it :) Alternatively, you can fix the existing abandoned PR #1473

Note, this is free open source software. Issues are fixed and features are created by those who need them and we all benefit. I don't use the Sidebar.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[adroste]

@codeaid
this is the right solution and nothing like closable needs to be implemented

please note that you should set dimmed as it disables pointer-events for the underlying content

<Sidebar.Pusher
  onClick={isSidebarOpen ? this.hideSidebar : null}
  dimmed={isSidebarOpen}
  content={content}
/>

[bchhabra2490]

My sidebar implementation. SidebarRightOverlay is custom component and Sidebar is semantic's. I haven't used Sidebar.Pusher. I want it close when clicked outside. Any idea how to do it. I have tried adding event listener and check if the ref contains the target area but it shows this.wrapperRef.contains is not a function. Any idea how to do it properly.

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[layershifter]

Fixed in #2845.