Search results

Open and Close the Sidebar in React Sidebar component

01 Dec 2021 / 1 minute 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.

Source
Preview
App.tsx
style.css
App.jsx
index.jsx
Copied to clipboard
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>
        )
    }
}
Copied to clipboard
@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;
}
Copied to clipboard
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>);
    }
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));