semantic-ui-react fixed sidebar and navbar: can't get sidebar and content to scroll nicely

Question

I'm new to semantic-ui-react and stuck trying to implement this layout.

Look at this fiddle

This is the closest I've been able to achieve. The two components have scroll-able areas (desired) but my primary issue is the sidebar doesn't stay fixed when scrolling in content, and scrolling to the bottom of the sidebar there is whitespace beneath.

Any ideas?

Here is the relevant component code:

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

UPDATE

New fiddle. I am mostly successful at getting the desired behavior; I'm no longer using the Sidebar component and instead using a simple Menu. My beginner CSS skills are not enough to figure out how to do it with Sidebar.

Answer 1

I actually used your fiddle to get mine working! Thanks for that:)

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>
    );
}