How to use the fixed menu and sidebar of semantic-ui in React

Semantic-ui's fixed menu and sidebar are well run in body (this is Sui's default design), but in react applications, the component system is placed in a relatively deep place, it is difficult to put directly in the body, at this time, a lot of problems.

Basic idea: Create a sidebar component as the context for the sidebar and put the content in the Pusher section.

In so doing, you will find a lot of problems: NavBar and sidebar are no longer fixed, display problems, scrolling problems ...

The reason for this is that the CSS3 transform attribute is used, which causes the fixed element to fail. After some exploration, there is an imperfect but passable solution.

First, build the sidebar component

<div ref= "Context" classname= "pushable patch" >
    <div ref= "sidebar" classname= "UI Sidebar inverted vertical left menu patch" >
       ...
    </div>
    <div classname= "Pusher" >
        {Children}
    </div>
</div>

Note the. Patch class is added for later repair

Then, initialize the sidebar in the Componentdidmount

$(this.refs.sidebar).sidebar({
    context: $(this.refs.context),
    transition: ‘overlay‘,
    mobileTransition: ‘overlay‘ });

Note that we specify the context and use overlay as the transition to avoid using the Transform property, which is a big limitation.

Then, hit the CSS patch

 
.pushable:not(body).patch { -webkit-transform: unset; transform: unset;
} .pushable:not(body) .patch.ui.sidebar { position: fixed;
}

First, remove the transform setting from the context, and then fix the sidebar position. Done.

This article is just a discussion, and the great God who has also faced this problem can share more excellent solutions.

How to use the fixed menu and sidebar of semantic-ui in React