Custom context in EJ2 TypeScript Sidebar control

28 Jan 202512 minutes to read

The Sidebar has a flexible option that allows it to be initialized and targeted to any HTML element alongside the main content of a web page.

By default, the Sidebar targets the body element. Using the target property, you can set the target element to initialize the Sidebar inside any HTML element apart from the body element.

If required, zIndex can be set when the Sidebar acts as an overlay type.

In the following sample, the Sidebar is rendered in context to a div container element that has the CSS class e-main-content.

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

let defaultSidebar: Sidebar = new Sidebar({
    width: "280px",
    type: "Push",
    target: '.maincontent'
});
defaultSidebar.appendTo('#default-sidebar');
//end of Sidebar initialization

//toggle button initialization
let togglebtn: Button = new Button({ iconCss: 'e-icons e-menu', isToggle: true, content: 'Open' }, '#toggle');

let toggleEle = document.getElementById('toggle');

// Close the Sidebar
const closeBtn = document.querySelector('#close');
if (closeBtn) {
    closeBtn.addEventListener('click', () => {
        defaultSidebar.hide();
        if (toggleEle) {
            toggleEle.classList.remove('e-active');
        }
        togglebtn.content = 'Open';
    });
}

// Click Event
const toggleBtn = document.querySelector('#toggle');
if (toggleBtn) {
    toggleBtn.addEventListener('click', () => {
        if (toggleEle && toggleEle.classList.contains('e-active')) {
            togglebtn.content = 'Close';
            defaultSidebar.show();
        } else {
            togglebtn.content = 'Open';
            defaultSidebar.hide();
        }
    });
}
<!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-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'>
        <!-- Sidebar element declaration -->
        <aside id="default-sidebar">
            <div class="title"> Sidebar content</div>
            <div id="list"></div>
            <div class="sub-title">
                Click the button to close the Sidebar.
            </div>
            <div class="center-align">
                <button id="close" class="e-btn close-btn">Close Sidebar</button>
            </div>
        </aside>
        <!-- end of Sidebar element -->
        <!-- main content declaration -->

        <div id="head">
            <button id="toggle" class="e-btn e-info"></button>
        </div>
        <div class="maincontent" style="height:325px;border:1px solid gray">
            <div>
                <div class="title"> Main content</div>
                <div class="sub-title"> content goes here.</div>
            </div>
        </div>
        <!--end of main content -->
    </div>
    <style>
        .header {
            width: 100%;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            font-weight: 500;
            background: #eee;
            display: inline-block;
        }

        .center-align {
            text-align: center;
            padding: 20px;
        }

        .e-menu:before {
            font-size: 16px;
        }

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

        #head {
            border: 1px solid #424242;
            border-bottom-color: transparent;
            background: #00897B;
        }

        #toggle,
        #toggle:hover,
        #toggle:focus {
            /* csslint allow: adjoining-classes*/
            background: #00695C;
            box-shadow: none;
            border-radius: 0;
            height: 39px;
            width: 100px;
        }

        #close,
        #close:hover,
        #close:active,
        #close:focus {
            /* csslint allow: adjoining-classes*/
            background: #fafafa;
            color: black
        }

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

        .radiobutton {
            display: inline-block;
            padding: 10px;
        }

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

        .sub-title {
            text-align: center;
            font-size: 16px;
            padding: 10px;
        }
        
        #default-sidebar {
            background-color: #26A69A;
            color: #ffffff;
        }

        .close-btn:hover {
            color: #fafafa;
        }
    </style>
</body>

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

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