feat(layout:sider): support for custom trigger with nzCollapsedWidth set to 0

components/layout/demo/custom-trigger.ts

@@ -4,7 +4,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
   selector: 'nz-demo-layout-custom-trigger',
   template: `
     <nz-layout>
-      <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="triggerTemplate">
+      <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzCollapsedWidth]="collapsedWidth" [nzTrigger]="triggerTemplate" [nzZeroTrigger]="zeroTriggerTemplate">
         <div class="logo">
         </div>
         <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" [nzInlineCollapsed]="isCollapsed">
@@ -71,10 +71,18 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
 export class NzDemoLayoutCustomTriggerComponent {
   isCollapsed = false;
   triggerTemplate = null;
+  zeroTriggerTemplate = null;
+  collapsedWidth = 80;
   @ViewChild('trigger') customTrigger: TemplateRef<void>;
 
   /** custom trigger can be TemplateRef **/
   changeTrigger(): void {
     this.triggerTemplate = this.customTrigger;
   }
+
+  /** custom trigger can be TemplateRef **/
+  changeZeroWidthTrigger(): void {
+    this.collapsedWidth = 0;
+    this.zeroTriggerTemplate = this.customTrigger;
+  }
 }

components/layout/nz-layout.spec.ts

@@ -173,6 +173,34 @@ describe('layout', () => {
       expect(trigger).not.toBeNull();
     });
   });
+
+  describe('custom-zero-trigger', () => {
+    let sider;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports     : [ NzLayoutModule ],
+        declarations: [ NzDemoLayoutCustomTriggerComponent ],
+        providers   : [],
+        schemas     : [ NO_ERRORS_SCHEMA ]
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzDemoLayoutCustomTriggerComponent);
+      testComponent = fixture.debugElement.componentInstance;
+      sider = fixture.debugElement.query(By.directive(NzSiderComponent)).injector.get(NzSiderComponent);
+    });
+    it('should display custom zero trigger', () => {
+      testComponent.changeZeroWidthTrigger();
+      testComponent.isCollapsed = true;
+      fixture.detectChanges();
+      const trigger = fixture.debugElement.query(By.css('.ant-layout-sider-zero-width-trigger'));
+      expect(trigger).not.toBeNull();
+      expect(trigger.nativeElement.firstElementChild.classList.contains('anticon-up')).toBe(true);
+    });
+  });
+
   describe('responsive', () => {
     let sider;
 

components/layout/nz-sider.component.html

@@ -2,12 +2,15 @@
   <ng-content></ng-content>
 </div>
 <span class="ant-layout-sider-zero-width-trigger" *ngIf="isZeroTrigger" (click)="toggleCollapse()">
-  <i class="anticon anticon-bars"></i>
+  <ng-template [ngTemplateOutlet]="nzZeroTrigger"></ng-template>
 </span>
 <div class="ant-layout-sider-trigger" *ngIf="isSiderTrigger" (click)="toggleCollapse()" [style.width.px]="nzCollapsed?nzCollapsedWidth:nzWidth">
   <ng-template [ngTemplateOutlet]="nzTrigger"></ng-template>
 </div>
 <ng-template #defaultTrigger>
   <i class="anticon" [class.anticon-left]="!nzCollapsed" [class.anticon-right]="nzCollapsed" *ngIf="!nzReverseArrow"></i>
   <i class="anticon" [class.anticon-left]="nzCollapsed" [class.anticon-right]="!nzCollapsed" *ngIf="nzReverseArrow"></i>
+</ng-template>
+<ng-template #defaultZeroTrigger>
+  <i class="anticon anticon-bars"></i>
 </ng-template>

components/layout/nz-sider.component.ts

@@ -32,6 +32,7 @@ export class NzSiderComponent implements OnInit, AfterViewInit {
   private _collapsed = false;
   private _collapsible = false;
   @ViewChild('defaultTrigger') _trigger: TemplateRef<void>;
+  @ViewChild('defaultZeroTrigger') _zeroTrigger: TemplateRef<void>;
   private _reverseArrow = false;
   private below = false;
   private isInit = false;
@@ -65,6 +66,15 @@ export class NzSiderComponent implements OnInit, AfterViewInit {
     return this._trigger;
   }
 
+  @Input()
+  set nzZeroTrigger(value: TemplateRef<void>) {
+    this._zeroTrigger = value;
+  }
+
+  get nzZeroTrigger(): TemplateRef<void> {
+    return this._zeroTrigger;
+  }
+
   @Input()
   set nzCollapsible(value: boolean) {
     this._collapsible = toBoolean(value);