Search results

Multiple Sidebar in React Sidebar component

27 Jul 2021 / 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.tsx
style.css
App.jsx
index.jsx
Copied to clipboard
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
    public leftSidebarObj: SidebarComponent;
    public rightSidebarObj: SidebarComponent;
    private type: SidebarType = 'Push'
    constructor(props: any) {
        super(props);
        this.leftToggle = this.leftToggle.bind(this);
        this.rightToggle = this.rightToggle.bind(this);
        this.onCreate = this.onCreate.bind(this);
    }
    public onCreate(): void {
        this.leftSidebarObj.element.style.visibility='';
        this.rightSidebarObj.element.style.visibility='';
    }
    // Toggle(Open/Close) the Sidebar1
    public leftToggle(): void {
        this.leftSidebarObj.toggle();
    }
    // Toggle(Open/Close) the Sidebar2
    public rightToggle(): void {
        this.rightSidebarObj.toggle();
    }
    public render() {
        return (
            <div className="control-section">
                <div id="wrapper">
                    {/* Initializing the Sidebar component */}
                    <SidebarComponent id="default" ref={Sidebar => this.leftSidebarObj = Sidebar as SidebarComponent}
                    width="200px" type={this.type} created={this.onCreate} style={{visibility:"hidden"}}>
                        <div className="title"> Left Sidebar content</div>
                    </SidebarComponent>
                    {/* Initializing the another Sidebar component */}
                    <SidebarComponent id="default1" ref={Sidebar => this.rightSidebarObj = Sidebar as SidebarComponent}
                        width="200px" type={this.type} position="Right" created={this.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={this.leftToggle} id="toggle-btn" className="e-btn e-info">Toggle Sidebar1</ButtonComponent>
                        <br/><br/>
                        <ButtonComponent onClick={this.rightToggle} id="toggle-btn1" className="e-btn e-info">Toggle Sidebar2</ButtonComponent>
                    </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";

#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 } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.type = 'Push';
        this.leftToggle = this.leftToggle.bind(this);
        this.rightToggle = this.rightToggle.bind(this);
        this.onCreate = this.onCreate.bind(this);
    }
    onCreate() {
        this.leftSidebarObj.element.style.visibility = '';
        this.rightSidebarObj.element.style.visibility = '';
    }
    // Toggle(Open/Close) the Sidebar1
    leftToggle() {
        this.leftSidebarObj.toggle();
    }
    // Toggle(Open/Close) the Sidebar2
    rightToggle() {
        this.rightSidebarObj.toggle();
    }
    render() {
        return (<div className="control-section">
                <div id="wrapper">
                    
                    <SidebarComponent id="default" ref={Sidebar => this.leftSidebarObj = Sidebar} width="200px" type={this.type} created={this.onCreate} style={{ visibility: "hidden" }}>
                        <div className="title"> Left Sidebar content</div>
                    </SidebarComponent>
                    
                    <SidebarComponent id="default1" ref={Sidebar => this.rightSidebarObj = Sidebar} width="200px" type={this.type} position="Right" created={this.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={this.leftToggle} id="toggle-btn" className="e-btn e-info">Toggle Sidebar1</ButtonComponent>
                        <br /><br />
                        <ButtonComponent onClick={this.rightToggle} id="toggle-btn1" className="e-btn e-info">Toggle Sidebar2</ButtonComponent>
                    </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'));