исправлена ​​боковая панель и панель навигации semantic-ui-react: невозможно заставить боковую панель и контент хорошо прокручиваться

Я новичок в semantic-ui-react и застрял, пытаясь реализовать этот макет.

Посмотрите на эту скрипку

Это самое близкое, чего я смог достичь. Два компонента имеют области с возможностью прокрутки (желательно), но моя основная проблема заключается в том, что боковая панель не остается фиксированной при прокрутке содержимого, а при прокрутке до нижней части боковой панели есть пробел под ним.

Любые идеи?

Вот соответствующий код компонента:

  <div style={{paddingTop: '51px'}}>
    <Menu size="massive" fixed="top" inverted borderless >
      <Menu.Item header onClick={()=>{}}>
        App Name and Logo
      </Menu.Item>
      <Menu.Item onClick={()=>{}}>
        <Icon name="bars"/>
      </Menu.Item>
      <Menu.Menu position="right" style={{fontSize: '1rem'}}>
        <Menu.Item onClick={()=>{}}><Icon name="sign in"/>log in</Menu.Item>
      </Menu.Menu>

    </Menu>
    <div>
      <Sidebar.Pushable as={Segment} >
        <Sidebar as={Menu} borderless
                 animation='push' visible={true} vertical inverted>
          <Menu.Item name='home' onClick={()=>{}}>
            <Icon name='home'/>
            <span>Home</span>
          </Menu.Item>
          <Menu.Item name='users' onClick={()=>{}}>
            <Icon name='users'/>
            <span>Users</span>
          </Menu.Item>
          <Menu.Item name='repos' onClick={()=>{}}>
            <Icon name='fork' />
            <span>Repositories</span>
          </Menu.Item>
          {sidebarArr}
        </Sidebar>
        <Sidebar.Pusher >
          <Segment basic>
            {contentArr}

          </Segment>
        </Sidebar.Pusher>
      </Sidebar.Pushable>

    </div>
  </div>

ОБНОВЛЕНИЕ

Новая скрипка. Мне в основном удается добиться желаемого поведения; Я больше не использую компонент боковой панели и вместо этого использую простое меню. Моих начальных навыков CSS недостаточно, чтобы понять, как это сделать с боковой панелью.


person davegravy    schedule 16.01.2018    source источник