Semantic-UI-react fixed sidebar

Question

Have Googled, searched within semantic ui's docs and issues page, and searched within stackoverflow. Couldn't find the answer.

Within Semantic-ui-react, how do I make a sidebar whose content is fixed to the screen? What I currently have is this:

<Sidebar.Pushable as={Segment}>
    <Sidebar
        id="sidebar"
        as={Menu}
        animation="overlay"
        direction="right"
        visible={this.state.visible}
        vertical
        inverted
    >
        {this.getMenuItems()}
    </Sidebar>
    <Sidebar.Pusher>
        <Route path="/" component={Filler} />
    </Sidebar.Pusher>
</Sidebar.Pushable>

There doesn't seem to be any word in it in the semantic-ui-react documentation, and making Sidebar.Pushable, Sidebar, or any of the Menu Items position:fixed; doesn't seem to work either.

Answer 1

I was able to achieve a sticky sidebar with the help of this answer.

Basically, it states that in order to have a fixed sidebar that sticks to the our infinite scrolling page, we must remove the transform attribute on the parent container. The reasoning is because the transform changes the positioning context from the viewport to the rotated element. As a result, the "fixed" child element, behaves as if it has "absolute" positioning.

I added this to the sidebar.overrides file

/* Page Context */
.pushable:not(body) {
  transform: none;
}

.pushable:not(body) > .ui.sidebar,
.pushable:not(body) > .fixed,
.pushable:not(body) > .pusher:after {
  position: fixed;
}

This solution is meant for the base semantic-ui library. Since semantic-ui-react requires semantic-ui, this ends up working for semantic-ui-react sidebars as well.