Docking sidebar in Angular Sidebar component

27 Apr 20246 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 { 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 #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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also