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.

Answer 2

Give a try with below code.

<Sidebar as={Menu} animation='overlay' icon='labeled' inverted vertical visible width='wide'>
       <Menu.Item as={Link} to="/admin">
          <Icon name='building' />
          Rubykraft
       </Menu.Item>
       <Menu.Item as='a'>
          <Icon name='user' />
          Shan
       </Menu.Item>
       <Menu.Item as='a'>
         <Icon name='user' />
         Vishnu
       </Menu.Item>
</Sidebar>

Answer 3

I've used classes from semantic-ui's Sidebar module to create the desired fixed sidebar. If you want a more Component(ish) code, you should replace the pusher class with it's correspondent Sidebar.Pusher Component.

Here's my code:

import React, { Component } from 'react'
import { Dropdown, Icon, Input, Menu } from 'semantic-ui-react'

export default class MySidebar extends Component {
    state = {}

    handleItemClick = (e, { name }) => this.setState({ activeItem: name })


    componentDidMount() {}

    render() {
        const { activeItem } = this.state

        return(
            <div className='pusher'>
                <div className='full height'>
                    <div className='toc'>
                        <Menu className='inverted vertical left fixed'>
                            <Menu.Item>
                                Home
                                <Icon name='dashboard' />
                                <Menu.Menu>
                                    <Menu.Item name='search' active={activeItem === 'search'} onClick={this.handleItemClick}>
                                        Search
                                    </Menu.Item>
                                    <Menu.Item name='add' active={activeItem === 'add'} onClick={this.handleItemClick}>
                                        Add
                                    </Menu.Item>
                                    <Menu.Item name='about' active={activeItem === 'about'} onClick={this.handleItemClick}>
                                        Remove
                                    </Menu.Item>
                                </Menu.Menu>
                            </Menu.Item>
                            <Menu.Item name='browse' active={activeItem === 'browse'} onClick={this.handleItemClick}>
                                <Icon name='grid layout' />
                                Browse
                            </Menu.Item>
                            <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick}>
                                Messages
                            </Menu.Item>

                            <Dropdown item text='More'>
                                <Dropdown.Menu>
                                    <Dropdown.Item icon='edit' text='Edit Profile' />
                                    <Dropdown.Item icon='globe' text='Choose Language' />
                                    <Dropdown.Item icon='settings' text='Account Settings' />
                                </Dropdown.Menu>
                            </Dropdown>
                        </Menu>
                    </div>
                    <div className='article'>
                        <div>Content</div>
                    </div>
                </div>
            </div>
        )
    }
}

And the style:

.toc {
    width: 200px;
}

.article {
    margin-left: 210px;
}

Answer 4

Everything is easier!

<Sidebar.Pusher style={{overflow: 'scroll', height: '100%'}}>

I think you yourself will understand why this works.