Types in EJ2 TypeScript Sidebar control

3 Mar 202516 minutes to read

The Sidebar control’s expand behavior can be modified based on its intended use.

Expanding types of Sidebar

The Sidebar can be initialized with one of four different types, each consistent with the main control, as explained below. When dataBind is invoked, it applies any pending property changes immediately to the control.

Item Description
Over Sidebar floats over the main content area.
Push Sidebar pushes the main content area to appear side-by-side, and shrinks the main content within the screen width.
Slide Sidebar translates the x and y positions of the main content area based on the Sidebar width. The main content area will not be adjusted within the screen width.
Auto Sidebar has the Over type in mobile resolution, and Push type in other higher resolutions.

Auto is the default expand mode. The Sidebar with type Auto will always expand on initial rendering, irrespective of enableDock and isOpen properties.

In the following sample, the types of Sidebar are demonstrated.

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

let defaultSidebar: Sidebar = new Sidebar({
    type: "Push",
    target: <HTMLElement>document.querySelector('.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');

//Click Event.

(document.querySelector('#toggle') as HTMLElement).addEventListener("click", () => {
    if ((document.getElementById('toggle') as HTMLElement).classList.contains('e-active')) {
        togglebtn.content = 'Close';
        defaultSidebar.show();
    } else {
        togglebtn.content = 'Open';
        defaultSidebar.hide();
    }
});

// Close the Sidebar
(document.querySelector('#close') as HTMLElement).addEventListener("click", () => {
    defaultSidebar.hide();
    (document.getElementById('toggle') as HTMLElement).classList.remove('e-active');
    togglebtn.content = 'Open'
});

let typeOver: RadioButton = new RadioButton({ label: 'Over', name: 'state', change: Change });
typeOver.appendTo('#over');

//unchecked state.
let typePush: RadioButton = new RadioButton({ label: 'Push', name: 'state', checked: true, change: Change });
typePush.appendTo('#push');

let typeSlide: RadioButton = new RadioButton({ label: 'Slide', name: 'state', change: Change });
typeSlide.appendTo('#slide');

//unchecked state.
let typeAuto: RadioButton = new RadioButton({ label: 'Auto', name: 'state', change: Change });
typeAuto.appendTo('#auto');

//change the togglebtn state.
function Changestate() {
    if (defaultSidebar.type == "Auto") {
        (document.getElementById('toggle') as HTMLElement).classList.add('e-active');
        togglebtn.content = 'close';
    }
    else {
        (document.getElementById('toggle') as HTMLElement).classList.remove('e-active');
        togglebtn.content = 'Open';
    }
}

function Change(args: ChangeArgs) {
    if ((<HTMLInputElement>args.event.target).id == "over") {
        defaultSidebar.type = "Over";
    } else if ((<HTMLInputElement>args.event.target).id == "push") {
        defaultSidebar.type = "Push";
    }
    else if ((<HTMLInputElement>args.event.target).id == "slide") {
        defaultSidebar.type = "Slide";
    }
    else {
        defaultSidebar.type = "Auto";
    }
    Changestate();
    defaultSidebar.dataBind();
}
<!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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.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:335px;border:1px solid gray">
            <div class="content">
                <div class="title">Main content</div>
                <div class="sub-title">
                    <div class="radiobutton">
                        <input type="radio" id="over" />
                    </div>
                    <div class="radiobutton">
                        <input type="radio" id="push" />
                    </div>
                    <div class="radiobutton">
                        <input type="radio" id="slide" />
                    </div>
                    <div class="radiobutton">
                        <input type="radio" id="auto" />
                    </div>
                </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 {
            content: '\e10d';
            font-size: 16px;
        }

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

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

        #container .e-btn.e-info,
        #container .e-btn.e-info:hover,
        #container .e-btn.e-info: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;
        }

        .radiobutton {
            padding: 10px;
        }

        .content {
            width: 100%;
            height: 334px;
        }

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

        #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%;
}

See Also