From 97127541b4a51d65c6bf8f5ee8f859f6a87f747a Mon Sep 17 00:00:00 2001
From: Kyle Ledbetter <kyle@kyleledbetter.com>
Date: Mon, 18 Jul 2016 16:13:51 -0500
Subject: [PATCH] feature(layouts): responsive nav-list (#21)

* udpate(nav-list): make list nav responsive

* udpate(layouts-overview): add images

* update(nav-list): min-width for list

* update(layout): keep list visible on desktop

* update(docs): add list toggle

* update(layout-nav-list): better responsive actions

* update(navs): toggle list

* update(manage-list): hide filters sidenav

* update(layouts): remove back-arrow button

- add card footer actions instead

* postinstall webdriver-manager update

* travis failing with webdriver update, separate in 2 steps
---
 package.json                                  |   3 +-
 src/app/assets/images/card-over.png           | Bin 0 -> 3689 bytes
 src/app/assets/images/manage-list.png         | Bin 0 -> 3602 bytes
 src/app/assets/images/nav-list.png            | Bin 0 -> 3652 bytes
 src/app/assets/images/nav-view.png            | Bin 0 -> 3309 bytes
 .../components/components.component.html      |   2 +-
 src/app/components/docs/docs.component.html   |   2 +-
 .../card-over/card-over.component.html        |  17 +++----
 .../layouts/card-over/card-over.component.ts  |  13 ++---
 .../manage-list/manage-list.component.html    |  13 ++---
 .../manage-list/manage-list.component.ts      |  13 ++---
 .../layouts/nav-list/nav-list.component.html  |  17 +++----
 .../layouts/nav-list/nav-list.component.ts    |  15 ++----
 .../layouts/nav-view/nav-view.component.html  |  15 +++---
 .../layouts/nav-view/nav-view.component.ts    |  13 ++---
 .../layouts/overview/overview.component.html  |  20 ++++++++
 .../layouts/overview/overview.component.scss  |   4 ++
 .../style-guide/style-guide.component.html    |   2 +-
 .../layout-manage-list.component.html         |   2 +-
 .../layout-nav-list.component.html            |  48 +++++++++---------
 .../layout-nav-list.component.scss            |  47 +++++++++++++++++
 21 files changed, 145 insertions(+), 101 deletions(-)
 create mode 100644 src/app/assets/images/card-over.png
 create mode 100644 src/app/assets/images/manage-list.png
 create mode 100644 src/app/assets/images/nav-list.png
 create mode 100644 src/app/assets/images/nav-view.png

diff --git a/package.json b/package.json
index 950b4c6885..69741ad039 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "e2e-test": "protractor ./config/protractor.conf.js",
     "tslint": "tslint -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\"",
     "typings": "typings install --global",
-    "postinstall": "npm run typings",
+    "postinstall": "npm run typings && webdriver-manager update",
+    "webdriver-update": "bash ./node_modules/.bin/webdriver-manager update",
     "pretest": "rm -rf ./dist && ng build",
     "test": "karma start ./config/karma.conf.js",
     "bump-dev": "gulp bump-version",
diff --git a/src/app/assets/images/card-over.png b/src/app/assets/images/card-over.png
new file mode 100644
index 0000000000000000000000000000000000000000..66dba42da56b8bedfaa856f747e5b632cd6524d6
GIT binary patch
literal 3689
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
DsP6zt

literal 0
HcmV?d00001

diff --git a/src/app/assets/images/manage-list.png b/src/app/assets/images/manage-list.png
new file mode 100644
index 0000000000000000000000000000000000000000..a85943794e963fdb273f417259c64e52bb839f29
GIT binary patch
literal 3602
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
F@Lw+8Lo)yX

literal 0
HcmV?d00001

diff --git a/src/app/assets/images/nav-list.png b/src/app/assets/images/nav-list.png
new file mode 100644
index 0000000000000000000000000000000000000000..583f7b9812c4bb70d954beeeaaa939b03b56f8cd
GIT binary patch
literal 3652
zcmcInXH-+!7EZz)CK(0{L8W7)st72c2u2Jwgc2-BZ&IWQ85BuCg;1po9qGLz5(ZEp
zLnul@RU$~4I0iHpq^N`l79hOqkN4}n_13)i*8I5loPF2X`<(CF``h>4<TC`E=ua{~
zK_C!OyoKpGaGd*o!G*#5IltacaDZMthckvy$K@8mMFPC3ksTTOzSQNioP#uFhqm%f
z;ZOD-v=h3aPhB+MOx9J}1v*<A+5OOn*?j?K2cS?yIwigfjznShV==3V$oE1<aOKRD
zion{vS$Q4z4h0lvCr&k%SV>%eZ&N}h>XbOmrs{=1cOudK#tVs6&7@1LGXBo|X^#c3
za<_%4#`EQy3lkC<a1j9gL>$I(`-<pvJRE+_M^`uo0>}Ul(Z6sC3kyTYSO~0C32Dl`
zZK=Xomb+>mONp;UwYX|7ctWA@uym|cV!BJqEN5JF!~#jdn)YWf`1TiHI=uBA(y_IC
znKsKn2p#-DHzM44?cTVtLH$CF(pTz!-Z$(?K6i*vULr=!NnRyP&p5Sio30no?IZAS
zAEs)*6C3H>3T|W0_j<V;H|`gPT|AK9=d73&wi&&BbuoG~texFoh?my?)`t1aY{A#I
z^wCa5Y9HRYy{r4Qgzcye>!<Of>;prunX6+O!PU1V$8Nnz_}Zt}DY?AhTNUa0VTtBJ
z9s3v(vVZ_CEB&?<@HTzG_MSy&!41}<T-VJh@6@Kp<(toOk~KjgPUN=75d`zs7GpE#
z&g4oi>`b(2I3uR}2KdoA&W>&yGO}n-k(diib-B}#(-=MZ=;k-~LkhD*wb^aKi=z$v
z(a8&icWo>x1kLwy2ii)ScXkeRpOft{>i2;)rAWFxbqfxST}{cSx)N`)X~u2uhC802
zEN|Y=j}V2KOE_MjzcU}5&RgUyySNuQIFPTl(R}}$yv=`UW98sm9Bni9ZF0~2$VfwH
z@S<v&N&lhmF*!YSjGbfNFEk=HeIK33-cWjAvUH+jOJPx;UH{=)R734{rc35cw@sH0
z4XWI`UY9ko=#h@$xbhA0RfQX?58~WECSJF<)EIvAdS%Xq(Uhway;wEH=Un+vSNvvJ
z$RqRXgO|QUT1`l0Nj_)t{i77Ed|!7C>xK>;mma^Xv13er{zHaU%b!~LQ!S{f^Q>6C
zL!?hp)>PJew;8?fY(dvk@9Qr-sWh1%CCY48YT&be1SSdnw^vuz2F^UIRyBk>Vj;Z4
z2NVw$;2^w5P152n|6*70aFd_sBl^4SH08GAzObS=U0nz%7+;XLCyI6no=>Ccn<%PS
z!|$OAv>Y&mV=jfi3CE-(vGjD$OGxl3mTs?b*Qi1XK(;6qNCU8Dz<&GPttI|xRAa7k
zL8MuUYs(4QK_*9VmPh?+8l-jC2m%Wh2lMe<Ks;{H)br_lR&Ov@%w6rlqoa-63!Pjs
zH?4~i&JV5pn2XZl#7#~h%-Fq0kQmQ@$_>^>zhvSY%Ofr2?sKHSRz&Vl&7;>l6(mWo
z_af$^Dks8^dJ$JD06(!*Jwd><WVu1tZ~~YO|7E-OD6Xxdkr}<YQ=Lc6d8XcnA`K7_
z3k0k6ulw}gO}PsarraIL3gdLm2a5yT-5dCI_DB3L0^h7>zKw=_x5gepLzgTmHD_Pu
zH->kb;lSu!yRz+=DO<ykeF56B{U}&)vSg1|N!0z&n(VE_gpjqkrS{QC6+2_I`r3;$
z<?$Ey?>z34X~B8X2J})oUl}&4Ba}wAdOWgTy!K!&&TA4r?p+rch6;yUR4~T(eMz56
z-wvrH3Phk*h<h4k?TbR(kW@pps}~VgM9cO0zTB<g`MhT*ai*lOzNz^xV+EY(o|);5
zd37T{##wE1+`!u^!};29E^BG``O@t>vjbLsMOr)n)*<e1g{cp+aLchte$|-adj_Y6
zyNS+fA}Cd#XT7tSIpM|mD#0V&G?(X0;XY5RqlAxTt^Eq**e3s}r&>9yA$aVuCwlAr
z(r|dgh|ZbW*tvAulumx{;6&?Q#3&3rEJH%ez`2n*zo~M~=J<i>>b|oXIEHk$Rmq36
z?Cy10l>Gvuo5x?83biv$F6`UhRNVGnBD^Cs-YGsRD7(cxJDWgrnVxsJGh1C<cQUfc
zK(xn*?zT%er0&c0satb*WRD6&%lD98EbUA53DB@mHv#N>nrOrOQHOqSRHQ+9#B(eM
z$1TpT&db+^K7`!uPAGQi&~uP$Vds+`4;2^7+U7n_J6YW9;uJ?Y26!b)%1=9@Au+Gv
zjFZ#WA(+Tm2(TN<@YbVHgkeebPy-WV2=9*{(G@Wik3Z<wSXr+mWD=u@CgE<HV=t~R
z$C6C2ve4+Il|_eLbD`ZGkQsy3_~@3c&@0%Ew6x~?BCqE3bf0`Ps~A+l_KU)7Pj7#c
zXpJh(G<P>KF=@NbQjp%)cRcN7vz2v1B}rfy?iN}9lpucKwxt=BXJA$wie43i4uu*s
zyh#-7Ed<*AR*a4upa@GEih@8z0oU0#cISmiiSdwV?Lk8bR37M}RmB;2Un+xeeWN5H
z6fqFO|725I`Mj#pgi4Fnu%kL=K89tdYL7c()}`07$09cD;;gkz`u%yiq{;cGIfY(X
z4X1#v!S?z*A1@@7q0`_PAGiz3_?zwO`X3TvhF$zv?DJ`)k@)1_KEj48^3(RR&JHbq
z4puk{*Q+%4jDge_tssz3z?P?r^|OGZ6*eJ&E)t6oeIktlSp+!~1(3EvVIYOv)?HYv
z5R~y0Qo4UXg}fs4m)s~5Ph+drE(Bh<1BbqXOKG?xZz`=^4(}BYU#^P{Jt+lku?CrP
zU4NWgEHa?(H)s#9DS*t94{C~4vaKMzm1d2?+5!l-w(CUvB`uJ&&JLeEFIZAOmy0aw
z0g$Y@XW33EVB%9!P5d`dSj_bxt4jw}DgSK%sZ$yU?D)JoKdl-mVp}DTnLDyJ#V(%U
z>IWLSJ2(*3P7fyb7kxi}Zm0+8a}jF62KfX}3Br_ql0MlEAhp_S)j~@_s?=@{jvt0H
z#x5`7UDZIc@a3&KAP#MpNYpGI!V8=9TX_V&5FX`~F|L8f{rB$GJN7wjL?MTmX8YWq
zS5WG?CCFz3zwXt#BhxOS-ThIf^u#RLJU`=wjS7WaXP@4c1|t4@Y|pKgcz=R|2w<(`
zd5?S%tsU{9B;e7k+{e0?qCrtwL~BWCHS_9J^4i8kR+zYo44i@PKj!|kg>DRX5~L-d
z>eG)gQs6{bxd@96028Ns_FEkGXIPS?5XuIfsS9OT6&=_%LJLC~snBFqq(u>gt74NY
zKqKQITqea-0<LTW;bp5@MkAAqAUrQ@6#~cx(c&d)PlJ0=$Vbr=01PjIrPm}+?gPA#
zM<Sii<a*RPr)H^w@ik%Qsge!s1*VAPq*<7JHQS&qRQ`JXG68kO88a)+riXUr(4|CR
z$;cNnTH?Qk!D2SxX!q-Mf6*9IaH1%+2*BQpW9b{@2^nw^mTr1v5&=9@qLAP7s*V9D
zPzcGMH4^Z9;K#$WS7t$QWw0Hh9$2U${WBok`$MTSNDELpDzRAv^b-XrBPc_%d4DDx
zL=7mFVk=I;l4cdOoK4W;FmqdxlwQ&B-|Z}cctq*$#4lc!5=*<)%)hgHgHCmID8U2>
z#n_1-ai%Bvc<kcV24*N0ID&m8H6hs?X^{tRGL|!kMy7(aJv3E<D}z;+{RU4&CYgb>
zU91uZvcX~*S*y{5GZZQ0)*};e*a%pOJ`t0$fENhSvA`dQ@d2gOhFKJawSwpmTkFPR
z+rZ>Gm3<P9aReuORb`COPB3#8A?fWao7-*tZStcbtMG-{?@}@2^CGY4mu^YP!h#gR
zVmUk5bBYsWS)ylzRfAIhV(I^%%K4`|*!_M8R9q=stRh6o%NHmACeQ4l#z||GHK{(_
zD=a*-2U%+3dFs2K0p)xh!-Vw)^_z7i-y4q>@+BJ->dIYpr`i&*@zAmHexQ)s+o?Xc
zuYmQt1`{s>h0YrPJ^R8a$kwQcDLEWe^2udO`-5s=<N414s0$HBqu$CGxT9JBHBNtd
zQPH89<#nsT<n*Y(sx;}bm6gl-3k$!;M!G#79UHu|_Il(gdw8n%uoAlpr<vchCzYv_
z<^RzkBR2BqCR|IT>HMeRgAK8nRldAv%?TD0m-0|4m$V-_efN$+{<OFKsk)sX`9B=?
UuA$m{fWL(hycxliYU~;N4{UCq3jhEB

literal 0
HcmV?d00001

diff --git a/src/app/assets/images/nav-view.png b/src/app/assets/images/nav-view.png
new file mode 100644
index 0000000000000000000000000000000000000000..44333eadf89706e0d2a8b6edc36baec2f8bcab58
GIT binary patch
literal 3309
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
E7ho!@MF0Q*

literal 0
HcmV?d00001

diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html
index aa658cd7e7..2ea40f0eb6 100644
--- a/src/app/components/components/components.component.html
+++ b/src/app/components/components/components.component.html
@@ -1,7 +1,7 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
   <list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
-        <a md-list-item [routerLink]="[item.route]">
+        <a md-list-item [routerLink]="[item.route]" (click)="list.toggle()">
           <md-icon md-list-avatar>{{item.icon}}</md-icon>
           <h3 md-line> {{item.title}} </h3>
           <p md-line> {{item.description}} </p>
diff --git a/src/app/components/docs/docs.component.html b/src/app/components/docs/docs.component.html
index 49bfceedcd..e1235a0139 100644
--- a/src/app/components/docs/docs.component.html
+++ b/src/app/components/docs/docs.component.html
@@ -1,7 +1,7 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
   <list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
-        <a md-list-item [routerLink]="[item.route]">
+        <a md-list-item [routerLink]="[item.route]" (click)="list.toggle()">
           <md-icon md-list-avatar>{{item.icon}}</md-icon>
           <h3 md-line> {{item.title}} </h3>
           <p md-line> {{item.description}} </p>
diff --git a/src/app/components/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html
index f943ba7316..87a3a27970 100644
--- a/src/app/components/layouts/card-over/card-over.component.html
+++ b/src/app/components/layouts/card-over/card-over.component.html
@@ -1,16 +1,8 @@
 <td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
   <td-layout-card-over>
-    <md-card-title>
-      <div layout="row" layout-align="start center">
-        <button md-button class="md-icon-button md-icon-button-mini" (click)="goBack()">
-          <md-icon >arrow_back</md-icon>
-        </button>
-        Card Over Layout
-      </div>
-    </md-card-title>
+    <md-card-title>Card Over Layout</md-card-title>
     <md-card-subtitle>A card overlaying a toolbar (this page is using card over)</md-card-subtitle>
     <md-divider></md-divider>
-
     <md-card-content>
       <div layout-gt-md="row">
         <div flex-gt-md="45">
@@ -147,6 +139,11 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
         </div>
       </div>
     </md-card-content>
-
+    <md-divider></md-divider>
+    <md-card-actions layout="row">
+        <a md-button [routerLink]="'/layouts'">Back to Overview</a>
+        <span flex></span>
+        <a md-button color="accent" [routerLink]="'/layouts/manage-list'">Manage List</a>
+    </md-card-actions>
   </td-layout-card-over>
 </td-layout-nav>
diff --git a/src/app/components/layouts/card-over/card-over.component.ts b/src/app/components/layouts/card-over/card-over.component.ts
index 0e13425a64..3c406ff6f3 100644
--- a/src/app/components/layouts/card-over/card-over.component.ts
+++ b/src/app/components/layouts/card-over/card-over.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { MdButton } from '@angular2-material/button';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
 import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 import { MdIcon } from '@angular2-material/icon';
@@ -11,13 +10,14 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 
 @Component({
   directives: [
-    MdButton,
+    MD_BUTTON_DIRECTIVES,
     MD_CARD_DIRECTIVES,
     MD_LIST_DIRECTIVES,
     MdIcon,
     TD_LAYOUT_DIRECTIVES,
     TdHighlightComponent,
     TD_STEPS_DIRECTIVES,
+    ROUTER_DIRECTIVES,
   ],
   moduleId: module.id,
   selector: 'td-layouts-card-over',
@@ -26,9 +26,4 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 })
 export class CardOverComponent {
 
-  constructor(private router: Router) {}
-
-  goBack(): void {
-    this.router.navigate(['/layouts']);
-  }
 }
diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
index 7ce034b5c0..4c41a67902 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.html
+++ b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -26,14 +26,7 @@
       <button md-button class="md-icon-button"><md-icon class="md-24">more_vert</md-icon></button>
     </toolbar-buttons>
     <md-card>
-      <md-card-title>
-        <div layout="row" layout-align="start center">
-          <button md-button class="md-icon-button md-icon-button-mini" (click)="goBack()">
-            <md-icon >arrow_back</md-icon>
-          </button>
-          Manage List Layout
-        </div>
-      </md-card-title>
+      <md-card-title> Manage List Layout</md-card-title>
       <md-card-subtitle>Content/object management views (this page is using manage list)</md-card-subtitle>
       <md-divider></md-divider>
       <md-card-content>
@@ -198,6 +191,10 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
           </div>
         </div>
       </md-card-content>
+      <md-divider></md-divider>
+      <md-card-actions layout="row">
+          <a md-button [routerLink]="'/layouts'">Back to Overview</a>
+      </md-card-actions>
     </md-card>
   </td-layout-manage-list>
 </td-layout-nav>
diff --git a/src/app/components/layouts/manage-list/manage-list.component.ts b/src/app/components/layouts/manage-list/manage-list.component.ts
index 6cf1224cdb..725e0325ce 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.ts
+++ b/src/app/components/layouts/manage-list/manage-list.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { MdButton } from '@angular2-material/button';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
 import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 import { MdIcon } from '@angular2-material/icon';
@@ -11,13 +10,14 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 
 @Component({
   directives: [
-    MdButton,
+    MD_BUTTON_DIRECTIVES,
     MD_CARD_DIRECTIVES,
     MD_LIST_DIRECTIVES,
     MdIcon,
     TD_LAYOUT_DIRECTIVES,
     TdHighlightComponent,
     TD_STEPS_DIRECTIVES,
+    ROUTER_DIRECTIVES,
   ],
   moduleId: module.id,
   selector: 'td-layouts-manage-list',
@@ -26,9 +26,4 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 })
 export class ManageListComponent {
 
-  constructor(private router: Router) {}
-
-  goBack(): void {
-    this.router.navigate(['/layouts']);
-  }
 }
diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html
index 7590bae4d0..ce8cefbabb 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.html
+++ b/src/app/components/layouts/nav-list/nav-list.component.html
@@ -1,7 +1,7 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
   <list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
-        <a md-list-item>
+        <a md-list-item (click)="list.toggle()">
           <md-icon md-list-avatar>{{item.icon}}</md-icon>
           <h3 md-line> {{item.title}} </h3>
           <p md-line> {{item.description}} </p>
@@ -14,14 +14,7 @@ <h3 md-line> {{item.title}} </h3>
     <span flex></span>
   </nav-toolbar-content>
   <md-card>
-    <md-card-title>
-      <div layout="row" layout-align="start center">
-        <button md-button class="md-icon-button md-icon-button-mini" (click)="goBack()">
-          <md-icon >arrow_back</md-icon>
-        </button>
-        Nav List Layout
-      </div>
-    </md-card-title>
+    <md-card-title>Nav List Layout</md-card-title>
     <md-card-subtitle>The Nav View with an embedded list (this page is using nav list)</md-card-subtitle>
     <md-divider></md-divider>
     <md-card-content>
@@ -165,5 +158,11 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
         </div>
       </div>
     </md-card-content>
+    <md-divider></md-divider>
+    <md-card-actions layout="row">
+        <a md-button [routerLink]="'/layouts'">Back to Overview</a>
+        <span flex></span>
+        <a md-button color="accent" [routerLink]="'/layouts/card-over'">Card Over</a>
+    </md-card-actions>
   </md-card>
 </td-layout-nav-list>
diff --git a/src/app/components/layouts/nav-list/nav-list.component.ts b/src/app/components/layouts/nav-list/nav-list.component.ts
index 7f5e808298..d830786b90 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.ts
+++ b/src/app/components/layouts/nav-list/nav-list.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { MdButton } from '@angular2-material/button';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
 import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 import { MdIcon } from '@angular2-material/icon';
@@ -11,13 +10,14 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 
 @Component({
   directives: [
-    MdButton,
+    MD_BUTTON_DIRECTIVES,
     MD_CARD_DIRECTIVES,
     MD_LIST_DIRECTIVES,
     MdIcon,
     TD_LAYOUT_DIRECTIVES,
     TdHighlightComponent,
     TD_STEPS_DIRECTIVES,
+    ROUTER_DIRECTIVES,
   ],
   moduleId: module.id,
   selector: 'td-layouts-nav-list',
@@ -25,7 +25,6 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
   templateUrl: 'nav-list.component.html',
 })
 export class NavListComponent {
-
   items: Object[] = [{
     description: 'A simple layout with toolbar & sidenav',
     icon: 'view_compact',
@@ -47,10 +46,4 @@ export class NavListComponent {
     route: '/manage-list',
     title: 'Management List View',
   }];
-
-  constructor(private router: Router) {}
-
-  goBack(): void {
-    this.router.navigate(['/layouts']);
-  }
 }
diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html
index fed2a189ff..422ed6001a 100644
--- a/src/app/components/layouts/nav-view/nav-view.component.html
+++ b/src/app/components/layouts/nav-view/nav-view.component.html
@@ -1,14 +1,7 @@
 <td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
   <div class="md-padding">
     <md-card>
-      <md-card-title>
-        <div layout="row" layout-align="start center">
-          <button md-button class="md-icon-button md-icon-button-mini" (click)="goBack()">
-            <md-icon >arrow_back</md-icon>
-          </button>
-          Nav View
-        </div>
-      </md-card-title>
+      <md-card-title>Nav View</md-card-title>
       <md-card-subtitle>A simple layout with toolbar &amp; sidenav (this page is using nav view)</md-card-subtitle>
       <md-divider></md-divider>
       <md-card-content>
@@ -126,6 +119,12 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
           </div>
         </div>
       </md-card-content>
+      <md-divider></md-divider>
+      <md-card-actions layout="row">
+        <a md-button [routerLink]="'/layouts'">Back to Overview</a>
+        <span flex></span>
+        <a md-button color="accent" [routerLink]="'/layouts/nav-list'">Nav List</a>
+      </md-card-actions>
     </md-card>
   </div>
 </td-layout-nav>
diff --git a/src/app/components/layouts/nav-view/nav-view.component.ts b/src/app/components/layouts/nav-view/nav-view.component.ts
index 19d3009c11..eb37b617ee 100644
--- a/src/app/components/layouts/nav-view/nav-view.component.ts
+++ b/src/app/components/layouts/nav-view/nav-view.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { MdButton } from '@angular2-material/button';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
 import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 import { MdIcon } from '@angular2-material/icon';
@@ -11,13 +10,14 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 
 @Component({
   directives: [
-    MdButton,
+    MD_BUTTON_DIRECTIVES,
     MD_CARD_DIRECTIVES,
     MD_LIST_DIRECTIVES,
     MdIcon,
     TD_LAYOUT_DIRECTIVES,
     TdHighlightComponent,
     TD_STEPS_DIRECTIVES,
+    ROUTER_DIRECTIVES,
   ],
   moduleId: module.id,
   selector: 'td-layouts-nav-view',
@@ -26,9 +26,4 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 })
 export class NavViewComponent {
 
-  constructor(private router: Router) {}
-
-  goBack(): void {
-    this.router.navigate(['/layouts']);
-  }
 }
diff --git a/src/app/components/layouts/overview/overview.component.html b/src/app/components/layouts/overview/overview.component.html
index 58e7bb8394..d6841945ac 100644
--- a/src/app/components/layouts/overview/overview.component.html
+++ b/src/app/components/layouts/overview/overview.component.html
@@ -1,5 +1,25 @@
 <td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
   <td-layout-card-over title="Layout Options" subtitle="We offer 4 Material Design layouts for you">
+    <md-card-content>
+      <div layout="row" layout-padding>
+        <a md-button flex [routerLink]="'nav-view'">
+          <img src="app/assets/images/nav-view.png" alt="Navigation View">
+          <div class="md-subtitle">Nav View</div>
+        </a>
+        <a md-button flex [routerLink]="'nav-list'">
+          <img src="app/assets/images/nav-list.png" alt="Navigation and List">
+          <div class="md-subtitle">Nav List</div>
+        </a>
+        <a md-button flex [routerLink]="'card-over'">
+          <img src="app/assets/images/card-over.png" alt="Card Overlap View">
+          <div class="md-subtitle">Card Over</div>
+        </a>
+        <a md-button flex [routerLink]="'manage-list'">
+         <img src="app/assets/images/manage-list.png" alt="Management List">
+         <div class="md-subtitle">Manage List</div>
+        </a>
+      </div>
+    </md-card-content>
     <md-nav-list>
       <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item [routerLink]="[item.route]">
diff --git a/src/app/components/layouts/overview/overview.component.scss b/src/app/components/layouts/overview/overview.component.scss
index e69de29bb2..a163442528 100644
--- a/src/app/components/layouts/overview/overview.component.scss
+++ b/src/app/components/layouts/overview/overview.component.scss
@@ -0,0 +1,4 @@
+img {
+    height: auto;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/app/components/style-guide/style-guide.component.html b/src/app/components/style-guide/style-guide.component.html
index 244e28ab7a..f2cbec3c06 100644
--- a/src/app/components/style-guide/style-guide.component.html
+++ b/src/app/components/style-guide/style-guide.component.html
@@ -1,7 +1,7 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
   <list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
-        <a md-list-item [routerLink]="[item.route]">
+        <a md-list-item [routerLink]="[item.route]" (click)="list.toggle()">
           <md-icon md-list-avatar>{{item.icon}}</md-icon>
           <h3 md-line> {{item.title}} </h3>
           <p md-line> {{item.description}} </p>
diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html
index b796606dbe..8ad537fc65 100644
--- a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html
+++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html
@@ -1,6 +1,6 @@
 <div layout="column" layout-fill>
   <md-content flex layout="row" layout-fill>
-    <md-sidenav #end align="end" layout="column" layout-fill class="md-sidenav-left app-list md-whiteframe-z1">
+    <md-sidenav hide-xs #end align="end" layout="column" layout-fill class="md-sidenav-left app-list md-whiteframe-z1">
       <md-content flex class="list">
         <md-nav-list>
           <ng-content select="list-items"></ng-content>
diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html
index 9498378f2f..ed28e5682f 100644
--- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html
+++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html
@@ -1,27 +1,29 @@
 <div layout="column" layout-fill>
-  <md-content flex layout="row" layout-fill>
-    <md-sidenav #list align="start" mode="side" layout="column" layout-fill class="md-sidenav-left app-list md-whiteframe-z1" flex-gt-xs="35">
-      <md-toolbar color="primary" class="md-whiteframe-z1">
-        <button md-button (click)="menuClick()" class="md-icon-button"><md-icon class="md-24">menu</md-icon></button>
-        <md-icon *ngIf="icon">{{icon}}</md-icon>
-        <md-icon *ngIf="logo" class="md-icon-logo" svgSrc="{{logo}}"></md-icon>
-        <span>{{title}}</span>
-        <ng-content select="list-toolbar-content"></ng-content>
-      </md-toolbar>
-      <md-content flex class="list">
-        <md-nav-list>
-          <ng-content select="list-items"></ng-content>
-        </md-nav-list>
+  <md-content flex layout-fill>
+    <md-sidenav-layout layout="row"  layout-fill>
+      <md-sidenav #list opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left app-list md-whiteframe-z1" flex-gt-xs="none">
+        <md-toolbar color="primary" class="md-whiteframe-z1">
+          <button md-button (click)="menuClick()" class="md-icon-button"><md-icon class="md-24">menu</md-icon></button>
+          <md-icon *ngIf="icon">{{icon}}</md-icon>
+          <md-icon *ngIf="logo" class="md-icon-logo" svgSrc="{{logo}}"></md-icon>
+          <span>{{title}}</span>
+          <ng-content select="list-toolbar-content"></ng-content>
+        </md-toolbar>
+        <md-content flex class="list">
+          <md-nav-list>
+            <ng-content select="list-items"></ng-content>
+          </md-nav-list>
+        </md-content>
+      </md-sidenav>
+      <md-content layout="column" layout-fill class="content">
+        <md-toolbar color="primary" class="md-whiteframe-z1">
+          <button md-button (click)="list.toggle()" class="md-icon-button" hide-gt-xs><md-icon class="md-24">arrow_back</md-icon></button>
+          <ng-content select="nav-toolbar-content"></ng-content>
+        </md-toolbar>
+        <md-content flex layout-fill>
+          <ng-content></ng-content>
+        </md-content>
       </md-content>
-    </md-sidenav>
-    <md-content layout="column" layout-fill class="content">
-      <md-toolbar color="primary" class="md-whiteframe-z1">
-        <button md-button (click)="list.toggle()" class="md-icon-button" hide-gt-xs><md-icon class="md-24">arrow_back</md-icon></button>
-        <ng-content select="nav-toolbar-content"></ng-content>
-      </md-toolbar>
-      <md-content flex layout-fill>
-        <ng-content></ng-content>
-      </md-content>
-    </md-content>
+    </md-sidenav-layout>
   </md-content>
 </div>
diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss
index 309dc12aad..6a631250da 100644
--- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss
+++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss
@@ -6,6 +6,52 @@
 @mixin toolbar-theme($palette) {
   color: md-color($palette, default-contrast);
 }
+:host {
+  md-sidenav-layout {
+    & > md-content {
+      margin-left: 0 !important;
+    }
+  }
+  @media (min-width: 600px) {
+    md-sidenav-layout {
+      display: flex;
+      height: 100%;
+      & > md-sidenav {
+        display: flex;
+        position: relative;
+        height: 100%;
+        width: 382px;
+        flex: 0 0 auto;
+        transition: none;
+        &.md-sidenav-closed,
+        &.md-sidenav-closing {
+          visibility: visible;
+          transform: translate3d(0, 0, 0);
+        }
+      }
+      & > md-content {
+        margin-left: 0 !important;
+        display: flex;
+        flex-grow: 1;
+      }
+    }
+  }
+  @media (max-width: 599px) {
+    md-sidenav-layout {
+
+      & > md-sidenav {
+        &.md-sidenav-opened,
+        &.md-sidenav-opening,
+        &.md-sidenav-closing {
+          z-index: 3;
+        }
+      }
+      & > md-content {
+        z-index: 2;
+      }
+    }
+  }
+}
 md-toolbar {
   box-shadow: $md-shadow-bottom-z-1;
   z-index: 1;
@@ -19,6 +65,7 @@ md-toolbar {
 .list {
     background-color: #fff;
     text-align: start;
+    
 }
 .content {
     overflow: hidden;