Search results

Multiple Sidebar in React Sidebar component

31 Jan 2023 / 1 minute 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.

Source
Preview
App.jsx
style.css
App.tsx
Copied to clipboard
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">
                
                <SidebarComponent id="default" ref={Sidebar => leftSidebarObj = Sidebar} width="200px" type={type} created={onCreate} style={{ visibility: "hidden" }}>
                    <div className="title"> Left Sidebar content</div>
                </SidebarComponent>
                
                <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;
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";

#container {
    visibility: hidden;
  }
  
  #loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
  }
  
  .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;
  }
Copied to clipboard
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;