React Semantic UI 如何做到 Bootstrap 3 的摺叠菜单功能？

Question

React Semantic UI 如何做到 Bootstrap 3 的摺叠菜单功能？
能把高度撑高，内容往下挤压？

目前用 Semantic Sidebar Pusher 做，会遇到高度不会自动增长的问题。
如下：现况
https://stackblitz.com/edit/r...

希望能像 Bootstrap 一样，自动增高。
如下：预期图
https://codepen.io/jaosnhsieh...

目前 Semantic React UI 代码：
可点此编辑：
https://stackblitz.com/edit/r...

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import {
  Sidebar,
  Segment,
  Button,
  Menu,
  Image,
  Icon,
  Header,
  Dropdown
} from 'semantic-ui-react';


class App extends Component {
  state = { visible: false };

  toggleVisibility = () => this.setState({ visible: !this.state.visible });

  render() {
    const { visible } = this.state;
    return (
      <div>
        <Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
        <Sidebar.Pushable as={Segment}>
          <Sidebar
            as={Menu}
            animation="push"
            direction="top"
            visible={visible}
            inverted
            vertical
          >
            <Menu.Item name="home">
              <Icon name="home" />
              Home
            </Menu.Item>
            <Menu.Item name="gamepad">
              <Icon name="gamepad" />
              Games
            </Menu.Item>
            <Menu.Item name="camera">
              <Icon name="camera" />
              Channels
            </Menu.Item>
          </Sidebar>
          <Sidebar.Pusher>
            <Segment basic> 
            <Header as="h3">Content</Header>
            </Segment> 

          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </div>
    );
  }
}


render(<App />, document.getElementById('root'));