Search results

Multiple Sidebar

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
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>
        )
    }
}
@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;
  }
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>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));