New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Closing sidebar by clicking on the page #1158
Comments
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>
)
}
} |
We should certainly support closing by click outside and put this behind a prop called This is ready to implement. I've labeled this issue accordingly, thanks for the report. |
One easy solution I found while playing with layouts is to add an <Sidebar.Pusher onClick={this.hideSidebar}> I've not tested this extensively but seems to work well. |
@codeaid Just implemented this, seems to work very well. I'll keep an eye on it while I continue developing. |
@levithomason any update about supporting Its really terrible solution to wrap whole application into pusher div just for a side bar. |
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. |
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. |
@codeaid 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}
/> |
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. |
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! |
Fixed in #2845. |
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?
The text was updated successfully, but these errors were encountered: