Multiple EJ2 TypeScript Sidebar control

28 Jan 20257 minutes to read

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

The HTML element with the class name e-main-content is considered the main content, and both Sidebars will act as side content relative to this main content area of the web page.

import { Sidebar } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

let leftSidebar: Sidebar = new Sidebar({
    width: "200px",
    type: 'Push'

});
leftSidebar.appendTo('#default');
//end of leftSidebar initialization

let rightSidebar: Sidebar = new Sidebar({
    width: "200px",
    position: 'Right',
    type: 'Push'
});
rightSidebar.appendTo('#default1');
//end of rightSidebar initialization

let toggleEle: HTMLElement = document.querySelector("#toggle-btn") as HTMLElement;
if(toggleEle) {
    // Toggle(Open/Close) the Sidebar1
    toggleEle.addEventListener('click', () => {
        leftSidebar.toggle();
    });
}

let toggleEle2: HTMLElement = document.querySelector("#toggle-btn2") as HTMLElement;
if(toggleEle2) {
    // Toggle(Open/Close) the Sidebar2
    toggleEle2.addEventListener('click', () => {
        rightSidebar.toggle();
    });
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="styles.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='loader'>LOADING....</div>
    <div id='container'>
        <!-- left Sidebar element -->
        <aside id="default">
            <div class="title"> Left Sidebar content</div>
        </aside>
        <!-- end of left Sidebar element -->
        <!-- right Sidebar element -->
        <aside id="default1">
            <div class="title">Right Sidebar content</div>
        </aside>
        <!-- end of right Sidebar element -->
        <!-- main content declaration -->
        <div class="e-main-content" style="font-size:16px;padding:100px" ;>
            <p>Place your main content here.....</p>
            <button id='toggle-btn' class='e-btn'>Toggle Sidebar1</button>
            <br>
            <br>
            <button id='toggle-btn2' class='e-btn'>Toggle Sidebar2</button>
        </div>
        <!-- end of main content -->

        <style>
            .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;
            }

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

            #default,
            #default1 {
                background-color: rgb(25, 118, 210);
                color: #ffffff;
                overflow: hidden;
            }
        </style>
    </div>
</body>

</html>
#container {
	visibility: hidden;
  }
  
  #loader {
	color: #008cff;
	height: 40px;
	width: 30%;
	position: absolute;
	top: 45%;
	left: 45%;
  }