Search results

Top and Bottom Sidebar in JavaScript Sidebar control

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.

Source
Preview
app.ts
index.html
styles.css
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</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>
/* 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 sidbar 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*/