From 4975389ed21d97ca76b411cf9e97420d8c46c763 Mon Sep 17 00:00:00 2001
From: tomastrajan <tomas.trajan@gmail.com>
Date: Tue, 6 Mar 2018 20:23:15 +1300
Subject: [PATCH] feat(examples): enhance responsivenes of submenu (and related
 styles fixes)

---
 src/app/app.component.scss                    |  2 +-
 src/app/app.component.scss-theme.scss         |  2 +-
 .../examples/examples/examples.component.html | 40 +++++++++----------
 .../examples/examples/examples.component.scss | 12 ++++--
 .../examples.component.scss-theme.scss        | 19 +++++++++
 .../examples/examples/examples.component.ts   |  5 ++-
 .../stock-market.component.scss-theme.scss    |  2 +-
 src/app/examples/todos/todos.component.html   |  2 +-
 .../todos/todos.component.scss-theme.scss     | 23 +++++------
 src/styles.scss                               |  4 +-
 10 files changed, 67 insertions(+), 44 deletions(-)
 create mode 100644 src/app/examples/examples/examples.component.scss-theme.scss

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 15bcdfd5e..c9af05089 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -59,7 +59,7 @@ mat-sidenav-container {
 
     @media (max-width: map-get($grid-breakpoints, sm)) {
       .content {
-        padding-top: 54px;
+        padding-top: 56px;
       }
     }
 
diff --git a/src/app/app.component.scss-theme.scss b/src/app/app.component.scss-theme.scss
index cd4cb3abb..d8b240848 100644
--- a/src/app/app.component.scss-theme.scss
+++ b/src/app/app.component.scss-theme.scss
@@ -24,7 +24,7 @@
     }
 
     mat-sidenav {
-      a {
+      .mat-list-item {
         &.active {
           color: mat-color($accent, default-contrast);
           background-color: mat-color($accent);
diff --git a/src/app/examples/examples/examples.component.html b/src/app/examples/examples/examples.component.html
index 90a1219a2..054ab8e21 100644
--- a/src/app/examples/examples/examples.component.html
+++ b/src/app/examples/examples/examples.component.html
@@ -1,33 +1,31 @@
-<nav mat-tab-nav-bar class="d-none d-md-block">
+<nav mat-tab-nav-bar >
   <a mat-tab-link
+     class="d-none d-md-inline-flex"
      *ngFor="let e of examples"
      [routerLink]="e.link"
      routerLinkActive #rla="routerLinkActive"
      [active]="rla.isActive">
     {{e.label}}
   </a>
+  <span class="nav-responsive d-md-none"
+        *ngFor="let e of examples"
+        [routerLink]="e.link"
+        routerLinkActive #rla="routerLinkActive"
+        [matMenuTriggerFor]="examplesMenu">
+    <a *ngIf="rla.isActive"
+        mat-tab-link>
+      <mat-icon>menu</mat-icon> {{e.label}}
+    </a>
+  </span>
 </nav>
-
-<div class="nav-responsive d-md-none">
-  <span *ngFor="let e of examples"
-     [routerLink]="e.link"
-     routerLinkActive #rla="routerLinkActive">
-    <button *ngIf="rla.isActive" mat-raised-button
-            color="primary"
-            [matMenuTriggerFor]="examplesMenu">
-      <span><mat-icon>menu</mat-icon> {{e.label}}</span>
+<mat-menu #examplesMenu="matMenu" [overlapTrigger]="false" class="nav-responsive-overlay">
+  <button mat-menu-item
+          *ngFor="let e of examples"
+          [routerLink]="e.link"
+          routerLinkActive="active">
+    {{e.label}}
   </button>
-  </span>
-  <mat-menu #examplesMenu="matMenu">
-    <button mat-menu-item
-            *ngFor="let e of examples"
-            [routerLink]="e.link"
-            routerLinkActive #rla="routerLinkActive"
-            ngClass="{ active: rla.isActive }">
-      {{e.label}}
-    </button>
-  </mat-menu>
-</div>
+</mat-menu>
 
 
 <div [@routerTransition]="o.isActivated && o.activatedRoute.routeConfig.path">
diff --git a/src/app/examples/examples/examples.component.scss b/src/app/examples/examples/examples.component.scss
index 3d6276d6a..f726214db 100644
--- a/src/app/examples/examples/examples.component.scss
+++ b/src/app/examples/examples/examples.component.scss
@@ -1,17 +1,23 @@
 nav {
   margin-bottom: 20px;
+
+  .mat-tab-link {
+    min-width: 130px;
+  }
 }
 
 .nav-responsive {
-  margin: 14px;
+  padding: 0 0 24px 0;
 
-  button {
+  a {
     width: 100%;
+    display: inline-block;
+    padding-top: 14px;
 
     mat-icon {
       float: left;
       position: relative;
-      top: 7px;
+      top: -1px;
     }
   }
 }
diff --git a/src/app/examples/examples/examples.component.scss-theme.scss b/src/app/examples/examples/examples.component.scss-theme.scss
new file mode 100644
index 000000000..6eb1f2778
--- /dev/null
+++ b/src/app/examples/examples/examples.component.scss-theme.scss
@@ -0,0 +1,19 @@
+@import '~@angular/material/theming';
+
+@mixin anms-examples-component-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+
+  anms-examples {
+    .nav-responsive {
+      border-bottom: 2px solid mat-color($primary);
+    }
+  }
+
+  .nav-responsive-overlay {
+    .active {
+      color: mat-color($accent, default-contrast);
+      background-color: mat-color($accent);
+    }
+  }
+}
diff --git a/src/app/examples/examples/examples.component.ts b/src/app/examples/examples/examples.component.ts
index 6e9fae050..2a1697eae 100644
--- a/src/app/examples/examples/examples.component.ts
+++ b/src/app/examples/examples/examples.component.ts
@@ -11,9 +11,10 @@ import { routerTransition } from '@app/core';
 export class ExamplesComponent implements OnInit {
   examples = [
     { link: 'todos', label: 'Todos' },
-    { link: 'stock-market', label: 'Stock Market' },
+    { link: 'stock-market', label: 'Stocks' },
     { link: 'theming', label: 'Theming' },
-    { link: 'authenticated', label: 'Authenticated' }
+    { link: 'notifications', label: 'Notifications' },
+    { link: 'authenticated', label: 'Auth' }
   ];
 
   constructor() {}
diff --git a/src/app/examples/stock-market/stock-market.component.scss-theme.scss b/src/app/examples/stock-market/stock-market.component.scss-theme.scss
index d4bb7997a..4450dd3db 100644
--- a/src/app/examples/stock-market/stock-market.component.scss-theme.scss
+++ b/src/app/examples/stock-market/stock-market.component.scss-theme.scss
@@ -1,6 +1,6 @@
 @import '~@angular/material/theming';
 
-@mixin anms-examples-component-theme($theme) {
+@mixin anms-stock-market-component-theme($theme) {
   $warn: map-get($theme, warn);
 
   anms-stock-market {
diff --git a/src/app/examples/todos/todos.component.html b/src/app/examples/todos/todos.component.html
index c8fcbb191..db75cb834 100644
--- a/src/app/examples/todos/todos.component.html
+++ b/src/app/examples/todos/todos.component.html
@@ -26,7 +26,7 @@ <h2>
         <button class="todos-filter" mat-icon-button [matMenuTriggerFor]="todosFilter">
           <mat-icon>filter_list</mat-icon>
         </button>
-        <mat-menu class="todos-filter-menu" #todosFilter="matMenu" xPosition="before">
+        <mat-menu class="todos-filter-menu-overlay" #todosFilter="matMenu" xPosition="before">
           <button mat-menu-item (click)="onFilterTodos('ALL')" [ngClass]="{ active: todos.filter === 'ALL' }">
             <mat-icon>assignment</mat-icon>
             <span>All</span>
diff --git a/src/app/examples/todos/todos.component.scss-theme.scss b/src/app/examples/todos/todos.component.scss-theme.scss
index d03d2a699..c5cbcd96f 100644
--- a/src/app/examples/todos/todos.component.scss-theme.scss
+++ b/src/app/examples/todos/todos.component.scss-theme.scss
@@ -3,21 +3,18 @@
 @mixin anms-todos-component-theme($theme) {
   $accent: map-get($theme, accent);
 
-  // angular material overlay class
-  .cdk-overlay-container {
-    .todos-filter-menu {
-      .active {
-        color: mat-color($accent, default-contrast);
-        background-color: mat-color($accent);
+  .todos-filter-menu-overlay {
+    .active {
+      color: mat-color($accent, default-contrast);
+      background-color: mat-color($accent);
 
-        .mat-icon {
-          color: mat-color($accent, default-contrast);
-        }
+      .mat-icon {
+        color: mat-color($accent, default-contrast);
+      }
 
-        &:hover {
-          color: mat-color($accent, default-contrast);
-          background-color: mat-color($accent);
-        }
+      &:hover {
+        color: mat-color($accent, default-contrast);
+        background-color: mat-color($accent);
       }
     }
   }
diff --git a/src/styles.scss b/src/styles.scss
index 24c761f34..681b0c81b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -24,6 +24,7 @@
 @import 'app/examples/stock-market/stock-market.component.scss-theme';
 @import 'app/examples/theming/parent/parent.component.scss-theme';
 @import 'app/examples/theming/child/child.component.scss-theme';
+@import 'app/examples/examples/examples.component.scss-theme';
 
 @mixin custom-components-theme($theme) {
   @include anms-styles-reset-theme($theme);
@@ -31,9 +32,10 @@
   @include anms-about-component-theme($theme);
   @include anms-big-input-component-theme($theme);
   @include anms-todos-component-theme($theme);
-  @include anms-examples-component-theme($theme);
+  @include anms-stock-market-component-theme($theme);
   @include anms-parent-component-theme($theme);
   @include anms-child-component-theme($theme);
+  @include anms-examples-component-theme($theme);
 }
 
 .default-theme {