Clash Royale CLAN TAG#URR8PPP

Semantic-UI-react fixed sidebar

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.

5 Answers
5

You can use Sticky component from the docs.

You would need to manually do it with some CSS/SCSS. Basically, you need to set the height to a fixed value.

@media only screen and (max-width: 768px)
.ui.wide.left.sidebar, .ui.wide.right.sidebar
height: 100vh !important;
position: absolute;


.pusher
margin-left: 20px;



.pushable
min-height: 100vh;


.ui.wide.left.sidebar, .ui.wide.right.sidebar
height: 100vh;
position: fixed !important;
bottom: 0px !important;
top: 0px !important;



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.

semantic-ui

Sidebar

Component

pusher

Sidebar.Pusher

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;



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.

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>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.