Having trouble getting help?
Contact Support
Contact Support
Open close sidebar in React Sidebar component
29 Aug 202310 minutes to read
Opening and closing the Sidebar can be achieved with built-in public methods.
- show(): Method to open the Sidebar.
- hide(): Method to close the Sidebar.
- toggle(): Method to toggle the open/close state of the Sidebar.
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';
function App() {
let sidebarObj;
function onCreate() {
sidebarObj.element.style.visibility = '';
}
function open() {
console.log("Sidebar is opened");
}
function close() {
console.log("Sidebar is closed");
}
// Open the Sidebar
function openClick() {
sidebarObj.show();
}
// Toggle(Open/Close) the Sidebar
function toggleClick() {
sidebarObj.toggle();
}
// Close the Sidebar
function closeClick() {
sidebarObj.hide();
}
return (<div className="control-section">
<div id="wrapper">
{/* Initializing the Sidebar component */}
<SidebarComponent id="default-sidebar" ref={Sidebar => sidebarObj = Sidebar} style={{ visibility: "hidden" }} close={close} open={open} created={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={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={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={toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
function App() {
let sidebarObj: SidebarComponent;
function onCreate(): void {
sidebarObj.element.style.visibility='';
}
function open(): void {
console.log("Sidebar is opened");
}
function close(): void {
console.log("Sidebar is closed");
}
// Open the Sidebar
function openClick(): void {
sidebarObj.show();
}
// Toggle(Open/Close) the Sidebar
function toggleClick(): void {
sidebarObj.toggle();
}
// Close the Sidebar
function closeClick(): void {
sidebarObj.hide();
}
return (
<div className="control-section">
<div id="wrapper">
{/* Initializing the Sidebar component */}
<SidebarComponent id="default-sidebar" ref={Sidebar => sidebarObj = Sidebar as SidebarComponent} style={{visibility:"hidden"}} close={close} open={open} created={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={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={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={toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>
)
}
export default App;