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.
// Top sidebar initialization
var topSidebar = new ej.navigations.Sidebar({ type: "Push", open: top_sidebar_open, close: top_sidebar_close });
topSidebar.appendTo('#top-sidebar');
// Bottom sidebar initialization
var bottomSidebar = new ej.navigations.Sidebar({ type: "Push", open: bottom_sidebar_open, close: bottom_sidebar_close });
bottomSidebar.appendTo('#bottom-sidebar');
// Top sidebar toogle button initialization
var topBtn = new ej.buttons.Button({ cssClass: 'e-info' });
topBtn.appendTo('#top-btn');
// Bottom sidebar toogle button initialization
var bottomBtn = new ej.buttons.Button({ cssClass: 'e-info' });
bottomBtn.appendTo('#bottom-btn');
document.getElementById('top-btn').onclick = function() {
topSidebar.toggle();
}
document.getElementById('bottom-btn').onclick = function() {
bottomSidebar.toggle();
}
function top_sidebar_open() {
var element = document.getElementsByClassName("e-content-animation")[0];
element.style.height = (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() {
var element = document.getElementsByClassName("e-content-animation")[0];
element.style.height = (element.offsetHeight + 75) + "px";
element.classList.remove("top_content_animation");
}
function bottom_sidebar_open() {
var element = document.getElementsByClassName("e-content-animation")[0];
element.style.height = (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() {
var element = document.getElementsByClassName("e-content-animation")[0];
element.style.height = (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/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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*/