how does React Semantic UI achieve the folding menu function of Bootstrap 3? Can
push up the height and squeeze the content down?

currently, if you do it with Semantic Sidebar Pusher, you will encounter the problem that the height will not increase automatically.
is as follows: status
https://stackblitz.com/edit/r.

Bootstrap
:
https://codepen.io/jaosnhsieh...

current Semantic React UI code:
you can click this edit:
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"));