Multiple EJ2 JavaScript 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.

ej.base.enableRipple(true);

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

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


//switch the expand and collapse state
document.getElementById('buttonClick').onclick = function () {
    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/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <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>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <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%;
}