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