Top and bottom Sidebar in Angular Sidebar component

7 Jan 20258 minutes to read

You can initialize the 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. To initialize the 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 sidebars on button click.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SidebarModule } from '@syncfusion/ej2-angular-navigations'




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

@Component({
imports: [SidebarModule, ],


standalone: true,
    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");
    }
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));