Fixed Sidebar in react-semantic-ui

Question

I have a Sidebar in react-semantic-ui which has some link to other pages, navigation menu. it's work fine, only when different pages when rendering with different sizes sidebar size is also changed with them. I want to make sidebar fixed. here is my code :

return (
  url !== '/auth' && (
    <div>
      <Header />
      <Button secondary onClick={this.toggleVisibility}>
        منو{' '}
      </Button>
      <Segment>
        <Sidebar.Pushable as={Segment}>
          <Sidebar
            as={Menu}
            animation="push"
            width="wide"
            direction="right"
            visible={visible}
            icon="labeled"
            vertical
            inverted
          >
            <Nav {...{ navLinks }} />
          </Sidebar>
          <Sidebar.Pusher>
            <div>{navLinks.map(renderNavLink)}</div>
            <BlockerModal />
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </Segment>
    </div>
  )

how can i make sidebar fixed and not change it's size over navigation?

Answer 1

You are probably using <Sidebar as={Menu}> without actually using any <Menu.Item> inside your <Nav >. Try wrapping each of your Sidebar items in <Menu.Item>