Target

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import { SampleBase } from './sample-base';

class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    public RadiobtnObj: RadioButtonComponent;
    private type: string = "Push";
    //Sidebar can be placed within the specified target element
    private target: string = '.content';
    public btnobj: ButtonComponent;
    //Toggle button click event handler
    btnClick(): void {
        let proxy: any = this;
        if (proxy.btnobj.element.classList.contains('e-active')) {
            proxy.btnobj.content = 'Close';
            this.sidebarobj.show();
        } else {
            proxy.btnobj.content = 'Open';
            this.sidebarobj.hide();
        }
    }

    render() {
        return (
            <div className="control-section">
                <div id="wrapper">
                    <SidebarComponent id="default-sidebar" type={this.type} target={this.target} ref={sidebar => this.sidebarobj = sidebar}>
                        <div className="title"> Sidebar content</div>
                        <div className="sub-title">
                            Click the button to close the Sidebar.
                         </div>
                        <div className="center-align">
                            <ButtonComponent onClick={this.closeClick.bind(this)} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                        </div>
                    </SidebarComponent>
                    <div id="head">
                        <ButtonComponent id="toggle" ref={(scope) => { this.btnobj = scope; }} iconCss='e-icons burg-icon'
                            isToggle onClick={this.btnClick.bind(this)} className="e-btn e-info">Open</ButtonComponent>
                    </div>
                    <div id="maincontent" className="content">
                        <div>
                            <div className="title">Main content</div>
                            <div className="center-align" >
                               Content goes here.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
  // Toggle(Open/Close) the Sidebar
    toggleClick(): void {
        this.sidebarobj.toggle();
    }
    // Close the Sidebar
    closeClick(): void {
        this.sidebarobj.hide();
        this.btnobj.content = 'Open';
    }
}

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