Opening and closing the Sidebar can be achieved with built-in public methods.
In the following sample, toggle method has been used to show or hide the Sidebar on button click.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public sidebarObj: SidebarComponent;
constructor(props:any) {
super(props);
this.closeClick = this.closeClick.bind(this);
this.openClick = this.openClick.bind(this);
this.toggleClick = this.toggleClick.bind(this);
this.onCreate = this.onCreate.bind(this);
}
public onCreate(): void {
this.sidebarObj.element.style.visibility='';
}
public open(): void {
console.log("Sidebar is opened");
}
public close(): void {
console.log("Sidebar is closed");
}
// Open the Sidebar
public openClick(): void {
this.sidebarObj.show();
}
// Toggle(Open/Close) the Sidebar
public toggleClick(): void {
this.sidebarObj.toggle();
}
// Close the Sidebar
public closeClick(): void {
this.sidebarObj.hide();
}
public render() {
return (
<div className="control-section">
<div id="wrapper">
{/* Initializing the Sidebar component */}
<SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarObj = Sidebar as SidebarComponent} style={{visibility:"hidden"}} close={this.close} open={this.open} created={this.onCreate}>
<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} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
</div>
</SidebarComponent>
<div>
<div className="title">Main content</div>
<div className="sub-title"> Click the button to Open the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.openClick} id="open" className="e-btn e-info">Open Sidebar</ButtonComponent>
</div>
<div className="sub-title"> Click the button to open/close the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>
)
}
}
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css";
.center-align {
text-align: center;
padding: 20px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
#wrapper {
display: block;
}
#close:hover,
#close:active,
#close:focus {
background:white;
color:black;
}
.right {
float: right;
}
body {
margin: 0;
}
#default-sidebar {
background-color: rgb(25, 118, 210);
color: #ffffff;
}
.close-btn:hover {
color: #fafafa;
}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
this.closeClick = this.closeClick.bind(this);
this.openClick = this.openClick.bind(this);
this.toggleClick = this.toggleClick.bind(this);
this.onCreate = this.onCreate.bind(this);
}
onCreate() {
this.sidebarObj.element.style.visibility = '';
}
open() {
console.log("Sidebar is opened");
}
close() {
console.log("Sidebar is closed");
}
// Open the Sidebar
openClick() {
this.sidebarObj.show();
}
// Toggle(Open/Close) the Sidebar
toggleClick() {
this.sidebarObj.toggle();
}
// Close the Sidebar
closeClick() {
this.sidebarObj.hide();
}
render() {
return (<div className="control-section">
<div id="wrapper">
<SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarObj = Sidebar} style={{ visibility: "hidden" }} close={this.close} open={this.open} created={this.onCreate}>
<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} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
</div>
</SidebarComponent>
<div>
<div className="title">Main content</div>
<div className="sub-title"> Click the button to Open the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.openClick} id="open" className="e-btn e-info">Open Sidebar</ButtonComponent>
</div>
<div className="sub-title"> Click the button to open/close the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));