semantic-ui-react 固定侧边栏和导航栏：无法让侧边栏和内容很好地滚动

Question

我是 semantic-ui-react 的新手，并且一直在尝试实现此布局。

看this fiddle

这是我所能达到的最接近的结果。这两个组件具有可滚动的区域（需要），但我的主要问题是侧边栏在滚动内容时不会保持固定，并且滚动到侧边栏的底部下方有空白。

有什么想法吗？

下面是相关的组件代码：

  <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>

更新

新fiddle。我在获得期望的行为方面取得了很大的成功；我不再使用侧边栏组件，而是使用简单的菜单。我的初学者 CSS 技能不足以弄清楚如何使用 Sidebar。

Answer 1

我实际上是用你的小提琴来让我的工作的！谢谢你:)

if (menuMobile) {
    return (
        <Sidebar.Pushable style={{ transform: "none" }} as={Segment}>
            <Sidebar
                as={Menu}
                style={{
                    position: "fixed",
                    top: "0px",
                    bottom: "0px",
                    overflowY: "auto",
                }}
                animation="overlay"
                icon="labeled"
                inverted
                onHide={() => setVisible(false)}
                vertical
                visible={visible}
                width="thin"
            >
                <Menu.Item as="a">
                    <Icon name="home" />
                    Home
                </Menu.Item>
                <Menu.Item as="a">
                    <Icon name="gamepad" />
                    Games
                </Menu.Item>
                <Menu.Item as="a">
                    <Icon name="camera" />
                    Channels
                </Menu.Item>
            </Sidebar>

            <Sidebar.Pusher dimmed={visible}>
                <Visibility
                    onBottomPassed={() => {
                        setMenuFixed(true);
                        console.log("BOTTOM PASSED!");
                    }}
                    onBottomVisible={() => {
                        setMenuFixed(false);
                        console.log("VISIBLE");
                    }}
                    once={false}
                >
                    <Menu
                        borderless
                        //stackable
                        fixed={menuFixed ? "top" : undefined}
                        style={menuFixed ? fixedMenuStyle : menuStyle}
                    >
                        <Container>
                            <Menu.Item as="a" href="/dashboard" header>
                                <Image
                                    size="mini"
                                    src={process.env.PUBLIC_URL + "/Flaw-logo-notext.png"}
                                    style={{ marginRight: "1.5em" }}
                                />
                                Conference System
                            </Menu.Item>

                            <Menu.Menu position="right">
                                <Menu.Item as="a" onClick={() => setVisible(true)}>
                                    <Icon name="sidebar" />
                                </Menu.Item>
                            </Menu.Menu>
                        </Container>
                    </Menu>
                </Visibility>

                {children}
            </Sidebar.Pusher>
        </Sidebar.Pushable>
    );
}