Docking sidebar in Angular Sidebar component

28 Sep 20236 minutes to read

Dock state of the Sidebar reserves some space on the page that always remains in a visible, when the Sidebar is in collapsed state. It is used to show the short form of a content like icons alone instead of lengthy text. To achieve this , set enableDock as true along with required dockSize.

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

@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: ` <ejs-sidebar #dockBar id="dockSidebar" [enableDock]='enableDock' [width]='width' [dockSize]='dockSize'>
                    <div class="dock">
                        <ul>
                            <li class="sidebar-item" id="toggle" (click)="toggleClick()">
                                <span class="e-icons expand"></span>
                                <span class="e-text" title="menu">Menu</span>
                            </li>
                            <li class="sidebar-item">
                                <span class="e-icons home"></span>
                                <span class="e-text" title="home">Home</span>
                            </li>
                            <li class="sidebar-item">
                                <span class="e-icons profile"></span>
                                <span class="e-text" title="profile">Profile</span>
                            </li>
                            <li class="sidebar-item">
                                <span class="e-icons info"></span>
                                <span class="e-text" title="info">Info</span>
                            </li>
                            <li class="sidebar-item">
                                <span class="e-icons settings"></span>
                                <span class="e-text" title="settings">Settings</span>
                            </li>
                        </ul>
                    </div>
                </ejs-sidebar>
                <div id="main-content container-fluid col-md-12 ">
                    <div class="title">Main content</div>
                    <div class="sub-title"> Click the expand icon to open and collapse icons to close the Sidebar.</div>
                </div>
                <div>
                </div>`
})
export class AppComponent {
    @ViewChild('dockBar') dockBar?: SidebarComponent;
    public enableDock: boolean = true;
    public width: string = '220px';
    public dockSize: string = '72px';
    toggleClick() {
        this.dockBar?.toggle();
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';

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

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

See Also