Docking Sidebar in Angular Sidebar component

6 Feb 20257 minutes to read

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

In the following example, each list item includes an icon along with accompanying text. The visibility of the text is dynamically controlled through CSS rules based on the Sidebar’s state. When the enableDock property is enabled, the e-dock class is applied, adjusting the text visibility accordingly.

To show the icons alone in a docked (closed) state, the following CSS is applied:

.e-dock.e-close span.e-text {
  display: none;
}

To show the text along with icons when the Sidebar is open, this CSS is used:

.e-dock.e-open span.e-text {
  display: inline-block;
}

In the docked state, only icons in the list are visible, hinting at the hidden text content.

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

See Also