Multiple EJ2 TypeScript Sidebar control in the same position

28 Jan 202515 minutes to read

You can initialize a Sidebar at the left position using the position property. This will automatically adjust the width of the main content.

You can also initialize another Sidebar in the same position by adjusting the width of the first Sidebar.

The following example demonstrates how to align multiple Sidebars in the same position.

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

//Dock Sidebar initialization
let dockBar: Sidebar = new Sidebar({
    width: '220px',
    dockSize: '72px',
    enableDock: true,
    type: 'Push',
    target: 'e-main-content',
    zIndex: 3000
});
dockBar.appendTo('#dockSidebar');
//end of DockSidebar initialization

let defaultSidebar: Sidebar = new Sidebar({
    target: 'e-main-content',
    type: "Push",
});
defaultSidebar.appendTo('#default-sidebar');
//end of DefaultSidebar initialization

let btnEle: HTMLElement = document.querySelector("#buttonClick") as HTMLElement;
if(btnEle) {
    //switch the expand and collapse state
    btnEle.addEventListener('click', () => {
        defaultSidebar.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'>
        <!-- first Sidebar element -->
        <aside id="default-sidebar">
            <div class="sub-title">
                <h3> First Sidebar</h3>
                Place your primary content here.
            </div>
        </aside>
        <!-- dock Sidebar element -->
        <aside id="dockSidebar">
            <div class="dock">
                <ul>
                    <li class="sidebar-item" id="toggle">
                        <span class="e-icons e-chevron-right"></span>
                        <span class="e-text" title="menu">Menu</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons e-home"></span>
                        <span class="e-text" title="home">Home</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons e-home"></span>
                        <span class="e-text" title="profile">Profile</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons e-circle-info"></span>
                        <span class="e-text" title="info">Info</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons e-settings"></span>
                        <span class="e-text" title="settings">Settings</span>
                    </li>
                </ul>
            </div>
        </aside>
        <!-- main content declaration -->
        <div class="e-main-content container-fluid col-md-12">
            <div class="title">Main content</div>
            <div class="sub-title">
                <p>Click the radio button to switch the sidebar position</p>
                <div class="center-align">
                    <div class="column">
                        <button class="e-btn e-info" id="buttonClick">Open/close hidden Sidebar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end of main content -->
    </div>
    <style>
        .title {
            text-align: center;
            font-size: 20px;
            padding: 15px;
        }

        #default-sidebar {
            left: 72px;
        }

        .sub-title {
            text-align: center;
            font-size: 16px;
            padding: 10px;
        }

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

        #wrapper .sub-title .column {
            display: inline-block;
            padding: 10px;
        }

        .center {
            text-align: center;
            display: none;
            font-size: 13px;
            font-weight: 400;
            margin-top: 20px;
        }

        #dockSidebar.e-sidebar.e-right.e-close {
            visibility: visible;
            transform: translateX(0%);
        }

        #dockSidebar .e-icons::before {
            font-size: 25px;
        }

        #dockSidebar.e-close .sidebar-item {
            padding: 5px 20px;
        }

        #dockSidebar.e-dock.e-close span.e-text {
            display: none;
        }

        #dockSidebar.e-dock.e-open span.e-text {
            display: inline-block;
        }

        #dockSidebar li {
            list-style-type: none;
            cursor: pointer;
        }

        #dockSidebar ul {
            padding: 0px;
        }

        #dockSidebar.e-sidebar ul li:hover span {
            color: white
        }

        #dockSidebar span.e-icons {
            color: #c0c2c5;
            line-height: 2
        }

        .e-open .e-icons {
            margin-right: 16px;
        }

        .e-open .e-text {
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 23px;
            font-size: 15px;
        }

        .sidebar-item {
            text-align: center;
            border-bottom: 1px #e5e5e58a solid;
        }

        .e-sidebar.e-open .sidebar-item {
            text-align: left;
            padding-left: 15px;
            color: #c0c2c5;
        }

        #dockSidebar.e-sidebar {
            background: #2d323e;
            overflow: hidden;
        }

        /* end of Sidebar styles */
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}