Top and bottom sidebar in Angular Sidebar component

28 Sep 202310 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.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: `  <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>`
})
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 as SidebarComponent).element.classList.remove("e-left");
        // Add the custom class to sidebar
        (this.topSidebar as SidebarComponent).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 as SidebarComponent).element.classList.remove("e-left");
        // Add the custom class to sidebar
        (this.bottomSidebar as SidebarComponent).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");
    }
}

app.module.ts

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 { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

app.component.css

/* 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*/