How to disable content when sidebar is opened?

Question

In Semantic UI library exists sidebar. But in the tutorial, I see only examples where sidebar doesn't disable content after opening. How can I perform this?

Answer 1

You can wrap your <Sidebar.Pusher> content inside a disabled Dimmer like this:

<Sidebar.Pusher>
  <Dimmer disabled dimmed={this.state.sidebarIsVisible} as={Segment} >
   .... Your Segment content
  </Dimmer>
</Sidebar.Pusher>

You can read more about it here