Top and bottom sidebar in EJ2 TypeScript Sidebar control

2 May 20237 minutes to read

You can initialize Sidebar at the left and right positions by using the position property. It will automatically adjust the width of the main content.

You can also initialize Sidebar at the top and bottom positions in application level. For initializing Sidebar, you need to manually adjust the height of the main content.

In the following sample, the toggle method has been used to show or hide the top and bottom sidebar on button click.

import { Sidebar } from '@syncfusion/ej2-navigations';
import { Button } from '@syncfusion/ej2-buttons';

// Top sidebar initialization
let topSidebar: Sidebar = new Sidebar({ type: "Push", open: top_sidebar_open, close: top_sidebar_close });
topSidebar.appendTo('#top-sidebar');

// Bottom sidebar initialization
let bottomSidebar: Sidebar = new Sidebar({ type: "Push", open: bottom_sidebar_open, close: bottom_sidebar_close });
bottomSidebar.appendTo('#bottom-sidebar');

// Top sidebar toogle button initialization
let topBtn: Button = new Button({ cssClass: 'e-info' });
topBtn.appendTo('#top-btn');

// Bottom sidebar toogle button initialization
let bottomBtn: Button = new Button({ cssClass: 'e-info' });
bottomBtn.appendTo('#bottom-btn');

topBtn.element.onclick = ()=>{
  topSidebar.toggle();
}
bottomBtn.element.onclick = ()=>{
  bottomSidebar.toggle();
}

function top_sidebar_open() {
    let element: Element = document.getElementsByClassName("e-content-animation")[0];
    (<HTMLElement>element).style.height = ((<HTMLElement>element).offsetHeight - 75) + "px";
    element.classList.add("top_content_animation");
    // Remove the e-left class in sidebar
    topSidebar.element.classList.remove("e-left");
    // Add the custom class to sidebar
    topSidebar.element.classList.add("top_sidebar");
}

function top_sidebar_close() {
    let element: Element = document.getElementsByClassName("e-content-animation")[0];
    (<HTMLElement>element).style.height = ((<HTMLElement>element).offsetHeight + 75) + "px";
    element.classList.remove("top_content_animation");
}

function bottom_sidebar_open() {
    let element: Element = document.getElementsByClassName("e-content-animation")[0];
    (<HTMLElement>element).style.height = ((<HTMLElement>element).offsetHeight - 75) + "px";
    element.classList.add("bottom_animation_content");
    // Remove the e-left class in sidebar
    bottomSidebar.element.classList.remove("e-left");
    // Add the custom class to sidebar
    bottomSidebar.element.classList.add("bottom_sidebar");
}

function bottom_sidebar_close() {
    let element: Element = document.getElementsByClassName("e-content-animation")[0];
    (<HTMLElement>element).style.height = ((<HTMLElement>element).offsetHeight + 75) + "px";
    element.classList.remove("bottom_animation_content");
}
<!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/26.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.1.35/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'>
        <aside id="top-sidebar">
            <div class="title">
                <div style="display:inline-block"> Top Sidebar </div>
            </div>
            <div class="content">
                Place your top sidebar primary content here.
            </div>
        </aside>
        <aside id="bottom-sidebar">
            <div class="title">
                <div style="display:inline-block"> Bottom Sidebar </div>
            </div>
            <div class="content">
                Place your bottom sidebar primary content here.
            </div>
        </aside>
        <div class="e-main-content">
          <div class="sub-content">
            <p>Place your main content here.....</p>
            <div id="button-align">
                <button id="top-btn" class="toggle">Toggle Top Sidebar</button>
            </div>
            <div id="button-align">
                <button id="bottom-btn" class="toggle">Toggle Bottom Sidebar</button>
            </div>
          </div>
        </div>
    </div>
</body>

</html>