Sidebar

Pages Sidebar

Importing

First import it to your app module or any submodule as you wish

import { SidebarComponent } from './@pages/components/sidebar/sidebar.component';
import { SharedModule } from './@pages/components/shared.module';
@NgModule({
  declarations : [SidebarComponent,...]
  imports: [SharedModule,...]
})
export class AppModule(){}

Example Menu

Use the appropriate regions and depends on pg-menu-items for showing the menu links

Menu Items
	<pg-sidebar>
		<ng-template #sideBarOverlay>
			<div class="row">
			<div class="col-xs-6 no-padding">
				<a href="javascript:void(0)" class="p-l-40"><img src="assets/img/demo/social_app.svg" alt="socail">
				</a>
			</div>
			<div class="col-xs-6 no-padding">
				<a href="javascript:void(0)" class="p-l-10"><img src="assets/img/demo/email_app.svg" alt="socail">
				</a>
			</div>
			</div>
			<div class="row">
			<div class="col-xs-6 m-t-20 no-padding">
				<a href="javascript:void(0)" class="p-l-40"><img src="assets/img/demo/calendar_app.svg" alt="socail">
				</a>
			</div>
			<div class="col-xs-6 m-t-20 no-padding">
				<a href="javascript:void(0)" class="p-l-10"><img src="assets/img/demo/add_more.svg" alt="socail">
				</a>
			</div>
			</div>      
		</ng-template>
		<ng-template #sideBarHeader>
			<img src="assets/img/logo_white.png" alt="logo" class="brand" pgRetina src1x="assets/img/logo_white.png" src2x="assets/img/logo_white_2x.png" width="78" height="22">
			<div class="sidebar-header-controls">
				<button type="button" class="btn btn-xs sidebar-slide-toggle btn-link m-l-20 hidden-md-down" [class.active]="_menuDrawerOpen" (click)="toggleMenuDrawer()"><i class="fa fa-angle-down fs-16"></i>
				</button>
				<button type="button" class="btn btn-link hidden-md-down" data-toggle-pin="sidebar" (click)="toggleMenuPin()"><i class="fa fs-12"></i>
				</button>
			</div>
		</ng-template>
		<ng-template #menuItems>
			<pg-menu-items [Items]="menuLinks">
			</pg-menu-items>
		</ng-template>
	</pg-sidebar>

Last updated