Top and bottom Sidebar in EJ2 TypeScript Sidebar control

28 Jan 202513 minutes to read

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

Additionally, you can initialize the Sidebar at the top and bottom positions at the application level. When initializing the Sidebar in these positions, you will need to manually adjust the height of the main content.

In the following sample, the toggle method is used to show or hide the top and bottom Sidebar on a 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 toggle button initialization
let topBtn: Button = new Button({ cssClass: 'e-info' });
topBtn.appendTo('#top-btn');

// Bottom Sidebar toggle 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/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'>
        <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>
    <style>
        /* sample-level styles */
        body {
            overflow: hidden;
        }

        .e-main-content {
            text-align: center;
            background: #f5f5f5;
            font-size: 16px;
            overflow: auto;
        }

        .sub-content {
            height: 378px;
            padding: 50px;
        }

        #button-align {
            padding: 10px;
        }

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

        .content {
            padding: 10px;
            text-align: center;
        }

        .toggle {
            width: 200px;
        }

        #top-sidebar,
        #bottom-sidebar {
            background-color: rgb(25, 118, 210);
            color: #ffffff;
            overflow: hidden;
        }

        /* top Sidebar element styles*/
        .top_sidebar.e-open {
            transform: translateY(0%) !important;
            transition: transform 0.5s ease;
            visibility: visible;
        }

        .top_sidebar,
        #top-sidebar.e-left,
        .bottom_sidebar {
            width: 100% !important;
            float: left;
            height: 75px;
        }

        .top_sidebar,
        #top-sidebar.e-left {
            transform: translateY(-100%) !important;
        }

        .top_sidebar.e-close {
            transform: translateY(-100%);
        }

        .top_content_animation {
            margin-left: 0px !important;
            margin-top: 75px;
        }

        /* end of top Sidebar element styles*/
        
        /*  bottom Sidebar element styles*/
        .bottom_sidebar.e-open {
            transform: translateY(0%) !important;
            transition: transform 0.5s ease;
            visibility: visible;
            bottom: 0;
            top: unset !important;
            position: absolute;
        }

        .bottom_sidebar.e-close {
            transform: translateY(100%);
        }

        #bottom-sidebar.e-left {
            transform: translateY(+100%) !important;
        }

        .bottom_animation_content {
            margin-left: 0px !important;
        }

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

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

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