Search results

Top and Bottom Sidebar in Angular Sidebar component

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.component.ts
app.module.ts
main.ts
app.component.html
app.component.css
import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
    selector: 'app-root',
    styleUrls: ['app/app.component.css'],
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    @ViewChild('topSidebar', { static: true }) topSidebar: SidebarComponent;
    @ViewChild('bottomSidebar', { static: true }) bottomSidebar: SidebarComponent;

    public type: string = 'Push';
    // only for sample browser use
    constructor( ) {

    }
    topBtnClick() {
        this.topSidebar.toggle();
    }
    bottomBtnClick() {
        this.bottomSidebar.toggle();
    }
    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
        this.topSidebar.element.classList.remove("e-left");
        // Add the custom class to sidebar
        this.topSidebar.element.classList.add("top_sidebar");
    }
    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");
    }

    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
        this.bottomSidebar.element.classList.remove("e-left");
        // Add the custom class to sidebar
        this.bottomSidebar.element.classList.add("bottom_sidebar");
    }

    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");
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';

@NgModule({
    imports: [SidebarModule, BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<ejs-sidebar id="top-sidebar" #topSidebar [type]="type" (open)="top_sidebar_open()" (close)="top_sidebar_close()">
    <div class="title">
        <div style="display:inline-block"> Top Sidebar </div>
    </div>
    <div class="content">
        Place your top sidebar primary content here.
    </div>
</ejs-sidebar>
<ejs-sidebar id="bottom-sidebar" #bottomSidebar [type]="type" (open)="bottom_sidebar_open()" (close)="bottom_sidebar_close()">
    <div class="title">
        <div style="display:inline-block"> Bottom Sidebar </div>
    </div>
    <div class="content">
        Place your bottom sidebar primary content here.
    </div>
</ejs-sidebar>
<div class="e-main-content">
  <div class="sub-content">
    <p>Place your main content here.....</p>
    <div id="button-align">
        <button ejs-button id="top-btn" class="toggle e-btn e-info" (click)="topBtnClick()">Toggle Top Sidebar</button>
    </div>
    <div id="button-align">
        <button ejs-button id="bottom-btn" class="toggle e-btn e-info" (click)="bottomBtnClick()">Toggle Bottom Sidebar</button>
    </div>
  </div>
</div>
/* 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*/