From 1f6a74becb47c2bef52a81529e5749e5973b841c Mon Sep 17 00:00:00 2001
From: Marc Redemske <marc.redemske@gmail.com>
Date: Sun, 12 Aug 2018 13:18:14 +0200
Subject: [PATCH 1/4] fix: dispatch `CloseSidenav` when nav closes

* This dispatches `CloseSidenav` on closedStart event

IMPORTANT: This does not work properly!
After unfocusing the sidenav, the element cannot be closed with
`escape` again, at least on the login screen. On other screens
it's not working at all.
---
 .../app/core/components/sidenav.component.ts        | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/example-app/app/core/components/sidenav.component.ts b/example-app/app/core/components/sidenav.component.ts
index 762be85dae..7974877263 100644
--- a/example-app/app/core/components/sidenav.component.ts
+++ b/example-app/app/core/components/sidenav.component.ts
@@ -1,9 +1,13 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import * as fromRoot from '../../reducers';
+import * as LayoutActions from '../actions/layout.actions';
 
 @Component({
   selector: 'bc-sidenav',
   template: `
-    <mat-sidenav [opened]="open">
+    <mat-sidenav [opened]="open" (closedStart)="closeSidenav()">
       <mat-nav-list>
         <ng-content></ng-content>
       </mat-nav-list>
@@ -19,4 +23,9 @@ import { Component, Input } from '@angular/core';
 })
 export class SidenavComponent {
   @Input() open = false;
+  constructor(private store: Store<fromRoot.State>) {}
+
+  closeSidenav() {
+    this.store.dispatch(new LayoutActions.CloseSidenav());
+  }
 }

From 74a4c94954d4ae611ffb45d6ce3a4ab115b61fee Mon Sep 17 00:00:00 2001
From: Marc Redemske <marc.redemske@gmail.com>
Date: Sun, 12 Aug 2018 13:34:25 +0200
Subject: [PATCH 2/4] fix: add manual close to `mat-sidenav`

* (keydown.escape) explicitly trigers `close` on mat-sidenav

This fixes the behaviour that the sidenav cannot be closed with
`escape` after unfocusing.
---
 example-app/app/core/components/sidenav.component.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/example-app/app/core/components/sidenav.component.ts b/example-app/app/core/components/sidenav.component.ts
index 7974877263..5841ffa4ca 100644
--- a/example-app/app/core/components/sidenav.component.ts
+++ b/example-app/app/core/components/sidenav.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { MatSidenav } from '@angular/material';
 import { Store } from '@ngrx/store';
 
 import * as fromRoot from '../../reducers';
@@ -7,7 +8,7 @@ import * as LayoutActions from '../actions/layout.actions';
 @Component({
   selector: 'bc-sidenav',
   template: `
-    <mat-sidenav [opened]="open" (closedStart)="closeSidenav()">
+    <mat-sidenav #sidenav [opened]="open" (keydown.escape)="sidenav.close()" (closedStart)="closeSidenav()" disabelClose>
       <mat-nav-list>
         <ng-content></ng-content>
       </mat-nav-list>
@@ -23,6 +24,7 @@ import * as LayoutActions from '../actions/layout.actions';
 })
 export class SidenavComponent {
   @Input() open = false;
+
   constructor(private store: Store<fromRoot.State>) {}
 
   closeSidenav() {

From acdbbd2d7087f1ca845642d93b4606e4f62b2a80 Mon Sep 17 00:00:00 2001
From: Marc Redemske <marc.redemske@gmail.com>
Date: Mon, 13 Aug 2018 13:08:23 +0200
Subject: [PATCH 3/4] refactor(example-app): shift code from dump component

dump/smart component convention, now dispatching the closing
action in the containter component (app.component)
See: ngrx/platform#1172
---
 .../app/core/components/sidenav.component.ts     | 16 +++-------------
 example-app/app/core/containers/app.component.ts |  2 +-
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/example-app/app/core/components/sidenav.component.ts b/example-app/app/core/components/sidenav.component.ts
index 5841ffa4ca..05384e9abe 100644
--- a/example-app/app/core/components/sidenav.component.ts
+++ b/example-app/app/core/components/sidenav.component.ts
@@ -1,14 +1,9 @@
-import { Component, Input } from '@angular/core';
-import { MatSidenav } from '@angular/material';
-import { Store } from '@ngrx/store';
-
-import * as fromRoot from '../../reducers';
-import * as LayoutActions from '../actions/layout.actions';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'bc-sidenav',
   template: `
-    <mat-sidenav #sidenav [opened]="open" (keydown.escape)="sidenav.close()" (closedStart)="closeSidenav()" disabelClose>
+    <mat-sidenav #sidenav [opened]="open" (keydown.escape)="sidenav.close()" (closedStart)="closeMenu.emit()" disabelClose>
       <mat-nav-list>
         <ng-content></ng-content>
       </mat-nav-list>
@@ -24,10 +19,5 @@ import * as LayoutActions from '../actions/layout.actions';
 })
 export class SidenavComponent {
   @Input() open = false;
-
-  constructor(private store: Store<fromRoot.State>) {}
-
-  closeSidenav() {
-    this.store.dispatch(new LayoutActions.CloseSidenav());
-  }
+  @Output() closeMenu = new EventEmitter();
 }
diff --git a/example-app/app/core/containers/app.component.ts b/example-app/app/core/containers/app.component.ts
index 0ba77b3fe6..30da7c73a5 100644
--- a/example-app/app/core/containers/app.component.ts
+++ b/example-app/app/core/containers/app.component.ts
@@ -12,7 +12,7 @@ import * as LayoutActions from '../actions/layout.actions';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <bc-layout>
-      <bc-sidenav [open]="showSidenav$ | async">
+      <bc-sidenav [open]="showSidenav$ | async" (closeMenu)="closeSidenav()">
         <bc-nav-item (navigate)="closeSidenav()" *ngIf="loggedIn$ | async" routerLink="/" icon="book" hint="View your book collection">
           My Collection
         </bc-nav-item>

From b938f5d3498ad69d569acff10e2c3acc0ae1a4b3 Mon Sep 17 00:00:00 2001
From: Marc Redemske <marc.redemske@gmail.com>
Date: Tue, 14 Aug 2018 11:23:43 +0200
Subject: [PATCH 4/4] fix(example-app): typo

---
 example-app/app/core/components/sidenav.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example-app/app/core/components/sidenav.component.ts b/example-app/app/core/components/sidenav.component.ts
index 05384e9abe..8e6d4397a9 100644
--- a/example-app/app/core/components/sidenav.component.ts
+++ b/example-app/app/core/components/sidenav.component.ts
@@ -3,7 +3,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 @Component({
   selector: 'bc-sidenav',
   template: `
-    <mat-sidenav #sidenav [opened]="open" (keydown.escape)="sidenav.close()" (closedStart)="closeMenu.emit()" disabelClose>
+    <mat-sidenav #sidenav [opened]="open" (keydown.escape)="sidenav.close()" (closedStart)="closeMenu.emit()" disableClose>
       <mat-nav-list>
         <ng-content></ng-content>
       </mat-nav-list>