Multiple Sidebar in React Sidebar component

28 Feb 202510 minutes to read

Two Sidebars can be initialized in a web page with same main content. Sidebars can be initialized on right side or left side of the main content using position property.

The HTML element with class name e-main-content will be considered as the main content and both the
Sidebars will behave as side content to this main content area.

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
function App() {
    let leftSidebarObj;
    let rightSidebarObj;
    let type = 'Push';
    function onCreate() {
        leftSidebarObj.element.style.visibility = '';
        rightSidebarObj.element.style.visibility = '';
    }
    // Toggle(Open/Close) the Sidebar1
    function leftToggle() {
        leftSidebarObj.toggle();
    }
    // Toggle(Open/Close) the Sidebar2
    function rightToggle() {
        rightSidebarObj.toggle();
    }
    return (<div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default" ref={Sidebar => leftSidebarObj = Sidebar} width="200px" type={type} created={onCreate} style={{ visibility: "hidden" }}>
                    <div className="title"> Left Sidebar content</div>
                </SidebarComponent>
                {/* Initializing the another Sidebar component */}
                <SidebarComponent id="default1" ref={Sidebar => rightSidebarObj = Sidebar} width="200px" type={type} position="Right" created={onCreate} style={{ visibility: "hidden" }}>
                    <div className="title"> Right Sidebar content</div>
                </SidebarComponent>
                <div className="e-main-content">
                    <p>Place your main content here.....</p>
                    <ButtonComponent onClick={leftToggle} id="toggle-btn" className="e-btn e-info">Toggle Sidebar1</ButtonComponent>
                    <br /><br />
                    <ButtonComponent onClick={rightToggle} id="toggle-btn1" className="e-btn e-info">Toggle Sidebar2</ButtonComponent>
                </div>
            </div>
        </div>);
}
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

function App() {
    let leftSidebarObj: SidebarComponent;
    let rightSidebarObj: SidebarComponent;
    let type: SidebarType = 'Push'
    function onCreate(): void {
        leftSidebarObj.element.style.visibility='';
        rightSidebarObj.element.style.visibility='';
    }
    // Toggle(Open/Close) the Sidebar1
    function leftToggle(): void {
        leftSidebarObj.toggle();
    }
    // Toggle(Open/Close) the Sidebar2
    function rightToggle(): void {
        rightSidebarObj.toggle();
    }
    return (
        <div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default" ref={Sidebar => leftSidebarObj = Sidebar as SidebarComponent}
                width="200px" type={type} created={onCreate} style={{visibility:"hidden"}}>
                    <div className="title"> Left Sidebar content</div>
                </SidebarComponent>
                {/* Initializing the another Sidebar component */}
                <SidebarComponent id="default1" ref={Sidebar => rightSidebarObj = Sidebar as SidebarComponent}
                    width="200px" type={type} position="Right" created={onCreate} style={{visibility:"hidden"}}>
                    <div className="title"> Right Sidebar content</div>
                </SidebarComponent>
                <div className="e-main-content">
                    <p>Place your main content here.....</p>
                    <ButtonComponent onClick={leftToggle} id="toggle-btn" className="e-btn e-info">Toggle Sidebar1</ButtonComponent>
                    <br/><br/>
                    <ButtonComponent onClick={rightToggle} id="toggle-btn1" className="e-btn e-info">Toggle Sidebar2</ButtonComponent>
                </div>
            </div>
        </div>
    )
}
export default App;

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

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

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

style.css

@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";

.header {
  width:100%;
 height: 40px;
 font-size:20px;
 line-height: 40px;
 font-weight: 500;
 background: #eee;
 display: inline-block;
}

.e-main-content{
text-align:center;
height:100vh;
background: #f5f5f5; 
font-size: 15px;
padding:100px;
}


.title {
 text-align: center;
 font-size: 20px;
 padding: 15px; 
}


#default,#default1 {
 background-color: rgb(25, 118, 210);
 color: #ffffff;
 overflow:hidden;
}