Multiple Sidebar in Angular Sidebar component

7 Jan 20255 minutes to read

Two Sidebars can be initialized in a web page with the same main content. Sidebars can be initialized on the right side or the left side of the main content using position property.

The HTML element with class name e-main-content is considered the main content and both the Sidebars will behave as side content to this main content area of a web page.

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',
    template: `  <ejs-sidebar id="default" #leftSidebar [width]='width' [type]='type'>
                        <div class="title"> Left Sidebar content</div>
                    </ejs-sidebar>

                    <ejs-sidebar id="default1" #rightSidebar [width]='width' [position]='position'
                        [type]='type'>
                        <div class="title">Right Sidebar content</div>
                    </ejs-sidebar>
                    <div class="e-main-content" style="font-size: 16px; padding: 100px 0; transform: translateX(0px); margin-left: 100px; margin-right: 100px; text-align: center;"> 
                        <p>Place your main content here.....</p>
                        <div id="button-align">
                            <button ejs-button id="toggle" class="e-btn e-info" (click)="leftToggle()">Toggle Sidebar 1</button>
                        </div>
                        <div id="button-align">
                            <button ejs-button id="toggle2" class="e-btn e-info" (click)="rightToggle()">Toggle Sidebar 2</button>
                        </div>
                    </div>`
})
export class AppComponent {
    @ViewChild('leftSidebar') leftsidebar?: SidebarComponent;
    @ViewChild('rightSidebar') rightsidebar?: SidebarComponent;

    public width:string='250px';
    public position:string='Right';
    public type:string='Push';

    leftToggle() {
        this.leftsidebar?.toggle();
    }
    rightToggle() {
        this.rightsidebar?.toggle();
    }
}

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';


#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

.header {
    width: 100%;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    font-weight: 500;
    background: #eee;
    display: inline-block;
}

.e-main-content {
    text-align: center;
    height: 100vh;
    background: #f5f5f5;
    font-size: 16px;
    padding: 100px;
}

#button-align {
    padding: 15px;
}

.title {
    text-align: center;
    font-size: 20px;
    padding: 15px;
}

#default,
#default1 {
    background-color: rgb(25, 118, 210);
    color: #ffffff;
    overflow: hidden;
}

main.ts

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