From 3887d8a4299ad19d2f7763c960a9db3dc62d38a3 Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Mon, 8 May 2017 15:41:19 -0700
Subject: [PATCH] feat(aio): close sidenav in narrow (mobile) mode when select
 a new document (#16617)

closes #16603
As before this PR, when wide (side-by-side), the sidenav open/close status only changes when nav to/from marketing page in which case it opens for guide/api and closes for marketing page.
---
 aio/src/app/app.component.spec.ts | 12 ++++++------
 aio/src/app/app.component.ts      | 17 +++++++++++------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index 6b6bc95e14..eeb33dabb2 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -118,13 +118,13 @@ describe('AppComponent', () => {
         expect(sidenav.className).toMatch(/sidenav-clos/);
       });
 
-      it('should stay closed when nav to another guide page', () => {
+      it('should stay closed when nav from one guide page to another', () => {
         locationService.go('guide/bags');
         fixture.detectChanges();
         expect(sidenav.className).toMatch(/sidenav-clos/);
       });
 
-      it('should stay closed when nav to api page', () => {
+      it('should stay closed when nav from a guide page to api page', () => {
         locationService.go('api');
         fixture.detectChanges();
         expect(sidenav.className).toMatch(/sidenav-clos/);
@@ -184,16 +184,16 @@ describe('AppComponent', () => {
         expect(sidenav.className).toMatch(/sidenav-clos/);
       });
 
-      it('should stay open when nav to another guide page', () => {
+      it('should close when nav to another guide page', () => {
         locationService.go('guide/bags');
         fixture.detectChanges();
-        expect(sidenav.className).toMatch(/sidenav-open/);
+        expect(sidenav.className).toMatch(/sidenav-clos/);
       });
 
-      it('should stay open when nav to api page', () => {
+      it('should close when nav to api page', () => {
         locationService.go('api');
         fixture.detectChanges();
-        expect(sidenav.className).toMatch(/sidenav-open/);
+        expect(sidenav.className).toMatch(/sidenav-clos/);
       });
 
       it('should close again when nav to market page', () => {
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index d7ab75005a..76c1bb2f52 100644
--- a/aio/src/app/app.component.ts
+++ b/aio/src/app/app.component.ts
@@ -116,13 +116,18 @@ export class AppComponent implements OnInit {
 
     this.navigationService.currentNode.subscribe(currentNode => {
       this.currentNode = currentNode;
-      this.updateHostClasses();
 
-      // Toggle the sidenav if side-by-side and the kind of view changed
-      if (this.previousNavView === currentNode.view) { return; }
-      this.previousNavView = currentNode.view;
-      this.isSideNavDoc = currentNode.view === sideNavView;
-      this.sideNavToggle(this.isSideNavDoc && this.isSideBySide);
+      // Preserve current sidenav open state by default
+      let openSideNav = this.sidenav.opened;
+
+      if (this.previousNavView !== currentNode.view) {
+        this.previousNavView = currentNode.view;
+        // View type changed. Is it now a sidenav view (e.g, guide or tutorial)?
+        // Open if changed to a sidenav doc; close if changed to a marketing doc.
+        openSideNav = this.isSideNavDoc = currentNode.view === sideNavView;
+      }
+      // May be open or closed when wide; always closed when narrow
+      this.sideNavToggle(this.isSideBySide ? openSideNav : false);
     });
 
     this.navigationService.navigationViews.subscribe(views => {