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