text: import React, {Component} from 'react';
  import {
    Sidebar,
    Segment,
    Button,
    Menu,
    Image,
    Icon,
    Header,
  } from 'semantic-ui-react';
  
  class SidebarRightScaleDown 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="scale down"
              width="thin"
              direction="right"
              visible={visible}
              icon="labeled"
              vertical
              inverted>
              <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">Application Content</Header>
                <Image src="http://semantic-ui.com/images/wireframe/paragraph.png" />
              </Segment>
            </Sidebar.Pusher>
          </Sidebar.Pushable>
        </div>
      );
    }
  }
  
  export default SidebarRightScaleDown;
  