feat(layout): add [mode], [opened] and [sidenavWidth] to main `…

…td-layout` (#609)

* feat(layout): add `[mode]` and `[opened]` to main layout

this so we can use diff types of modes for mid-small size projects in `td-layout`

* feat(layout): sidenavWidth

src/app/app.component.html

@@ -1,7 +1,10 @@
-<td-layout #layout>
+<td-layout #layout
+            [opened]="media.registerQuery('gt-md') | async"
+            [mode]="(media.registerQuery('gt-md') | async) ? 'side' : 'over'"
+            [sidenavWidth]="(media.registerQuery('gt-md') | async) ? '257px' : '320px'">
   <td-navigation-drawer sidenavTitle="Covalent" logo="assets:teradata" navigationRoute="/">
     <md-nav-list>
-      <a *ngFor="let item of routes" md-list-item (click)="layout.close()" [routerLink]="[item.route]"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
+      <a *ngFor="let item of routes" md-list-item (click)="!media.query('gt-md') && layout.close()" [routerLink]="[item.route]"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
     </md-nav-list>
   </td-navigation-drawer>
   <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MdIconRegistry } from '@angular/material';
-
+import { TdMediaService } from '@covalent/core';
 import { TranslateService } from '@ngx-translate/core';
 
 import { getSelectedLanguage } from './utilities/translate';
@@ -11,7 +11,7 @@ import { getSelectedLanguage } from './utilities/translate';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class DocsAppComponent {
+export class DocsAppComponent implements AfterViewInit {
 
   routes: Object[] = [{
       icon: 'home',
@@ -38,6 +38,8 @@ export class DocsAppComponent {
 
   constructor(private _iconRegistry: MdIconRegistry,
               private _domSanitizer: DomSanitizer,
+              private _changeDetectorRef: ChangeDetectorRef,
+              public media: TdMediaService,
               translateService: TranslateService) {
     // Set fallback language
     translateService.setDefaultLang('en');
@@ -63,4 +65,9 @@ export class DocsAppComponent {
     this._iconRegistry.addSvgIconInNamespace('assets', 'querygrid',
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/querygrid.svg'));
   }
+
+  ngAfterViewInit(): void {
+    this.media.broadcast();
+    this._changeDetectorRef.detectChanges();
+  }
 }

src/app/app.module.ts

@@ -12,7 +12,8 @@ import { appRoutes, appRoutingProviders } from './app.routes';
 
 import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdCoreModule, MdMenuModule } from '@angular/material';
 
-import { CovalentLayoutModule, CovalentExpansionPanelModule, CovalentNotificationsModule, CovalentMenuModule } from '../platform/core';
+import { CovalentLayoutModule, CovalentExpansionPanelModule, CovalentNotificationsModule, CovalentMenuModule,
+         CovalentMediaModule } from '../platform/core';
 import { CovalentHighlightModule } from '../platform/highlight';
 import { CovalentHttpModule } from '../platform/http';
 import { CovalentMarkdownModule } from '../platform/markdown';
@@ -49,6 +50,7 @@ import { getSelectedLanguage, createTranslateLoader } from './utilities/translat
     CovalentHighlightModule,
     CovalentMarkdownModule,
     CovalentDynamicFormsModule,
+    CovalentMediaModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,

src/platform/core/layout/README.md

@@ -3,6 +3,30 @@
 `<td-layout>` is a blank main sidenav component that gets hooked as parent of all the other layouts. (triggered by their menu buttons)
 
 
+## API Summary
+
+| Name | Type | Description |
+| --- | --- | --- |
+| mode | 'over', 'side' or 'push' | The mode or styling of the sidenav. Defaults to 'over'.
+| opened | boolean | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. Defaults to 'false'.
+| sidenavWidth | string | Sets the 'width' of the sidenav in either 'px' or '%' ('%' is not well supported yet as stated in the layout docs). Defaults to '320px'.
+
+
+## Usage
+
+`[td-sidenav-content]` is used to include content in the main sidenav.
+
+Example for Main Layout:
+
+```html
+<td-layout [mode]="side" [opened]="true" [sidenavWidth]="257px">
+  <div td-sidenav-content>
+   .. more sidenav content
+  </div>
+  .. main content
+</td-layout>
+```
+
 ## Installation
 
 This component can be installed as npm package.

src/platform/core/layout/_layout-theme.scss

@@ -20,6 +20,9 @@
       z-index: 1;
     }
   }
+  .mat-sidenav-side.td-layout-sidenav {
+    @include mat-elevation(2);
+  }
   .td-layout-footer {
     background: mat-color($background, app-bar);
     color: mat-color($foreground, text);

src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts

@@ -56,7 +56,7 @@ export class TdLayoutManageListComponent {
    * Proxy toggle method to access sidenav from outside (from td-layout template).
    */
   public toggle(): Promise<MdSidenavToggleResult> {
-    return this._sideNav.toggle();
+    return this._sideNav.toggle(!this._sideNav.opened);
   }
 
   /**

src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts

@@ -117,7 +117,7 @@ export class TdLayoutNavListComponent {
    * Proxy toggle method to access sidenav from outside (from td-layout template).
    */
   public toggle(): Promise<MdSidenavToggleResult> {
-    return this._sideNav.toggle();
+    return this._sideNav.toggle(!this._sideNav.opened);
   }
 
   /**
@@ -138,7 +138,7 @@ export class TdLayoutNavListComponent {
    * If main sidenav is available, it will open the sidenav of the parent [TdLayoutComponent].
    */
   openMainSidenav(): void {
-    this._layout.open();
+    this._layout.toggle();
   }
 
 }

src/platform/core/layout/layout-nav/layout-nav.component.ts

@@ -73,6 +73,6 @@ export class TdLayoutNavComponent {
    * If main sidenav is available, it will open the sidenav of the parent [TdLayoutComponent].
    */
   openMainSidenav(): void {
-    this._layout.open();
+    this._layout.toggle();
   }
 }

src/platform/core/layout/layout.component.html

@@ -1,5 +1,10 @@
 <md-sidenav-container fullscreen>
-  <md-sidenav>
+  <md-sidenav #sidenav
+              class="td-layout-sidenav"
+              [mode]="mode"
+              [opened]="opened"
+              [style.max-width]="sidenavWidth"
+              [disableClose]="disableClose">
     <ng-content select="td-navigation-drawer"></ng-content>
     <ng-content select="[td-sidenav-content]"></ng-content>
   </md-sidenav>

src/platform/core/layout/layout.component.ts

@@ -11,11 +11,52 @@ export class TdLayoutComponent {
 
   @ViewChild(MdSidenav) sidenav: MdSidenav;
 
+  /**
+   * mode?: 'side', 'push' or 'over'
+   *
+   * The mode or styling of the sidenav.
+   * Defaults to "over".
+   * See "MdSidenav" documentation for more info.
+   *
+   * https://github.com/angular/material2/tree/master/src/lib/sidenav
+   */
+  @Input('mode') mode: 'side' | 'push' | 'over' = 'over';
+
+  /**
+   * opened?: boolean
+   *
+   * Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
+   * Defaults to "false".
+   *
+   * See "MdSidenav" documentation for more info.
+   *
+   * https://github.com/angular/material2/tree/master/src/lib/sidenav
+   */
+  @Input('opened') opened: boolean = false;
+
+  /**
+   * sidenavWidth?: string
+   *
+   * Sets the "width" of the sidenav in either "px" or "%" ("%" is not well supported yet as stated in the layout docs)
+   * Defaults to "320px".
+   *
+   * https://github.com/angular/material2/tree/master/src/lib/sidenav
+   */
+  @Input('sidenavWidth') sidenavWidth: string = '320px';
+
+  /**
+   * Checks if `ESC` should close the sidenav
+   * Should only close it for `push` and `over` modes
+   */
+  get disableClose(): boolean {
+    return this.mode === 'side';
+  }
+
   /**
    * Proxy toggle method to access sidenav from outside (from td-layout template).
    */
   public toggle(): Promise<MdSidenavToggleResult> {
-    return this.sidenav.toggle();
+    return this.sidenav.toggle(!this.sidenav.opened);
   }
 
   /**