From 8cfa58715cf882af2fd1e18344e8f7d240029cba Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Mon, 10 Apr 2017 12:44:54 -0700
Subject: [PATCH] feat(aio): hide side nav in mobile mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Don’t show the side nav in mobile (not side-by-side) view when arriving or navigating.
Only show it by request.

The side nav should continue to appear in wide mode (side-by-side) when navigating from a marketing page to a guide page.
---
 aio/src/app/app.component.spec.ts | 67 +++++++++++++++++++++++++------
 aio/src/app/app.component.ts      |  4 +-
 2 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index 01cfb6a1bd..587dc46c36 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -71,35 +71,76 @@ describe('AppComponent', () => {
     });
   });
 
-  describe('shows/hide SideNav based on doc\'s navigation view', () => {
+  describe('SideNav when side-by-side', () => {
+    let hamburger: HTMLButtonElement;
+    let locationService: MockLocationService;
+    let sidenav: Element;
+
+    beforeEach(() => {
+      component.onResize(1033); // side-by-side
+      locationService = fixture.debugElement.injector.get(LocationService) as any;
+      hamburger = fixture.debugElement.query(By.css('.hamburger')).nativeElement;
+      sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
+    });
+
+    it('should open when nav to a guide page (guide/pipes)', () => {
+      locationService.urlSubject.next('guide/pipes');
+      fixture.detectChanges();
+      expect(sidenav.className).toMatch(/sidenav-open/);
+    });
+
+    it('should open when nav to an api page', () => {
+      locationService.urlSubject.next('api/a/b/c/d');
+      fixture.detectChanges();
+      expect(sidenav.className).toMatch(/sidenav-open/);
+    });
+
+    it('should be closed when nav to a marketing page (features)', () => {
+      locationService.urlSubject.next('features');
+      fixture.detectChanges();
+      expect(sidenav.className).toMatch(/sidenav-clos/);
+    });
+
+    describe('when manually closed', () => {
+
+      beforeEach(() => {
+        locationService.urlSubject.next('guide/pipes');
+        fixture.detectChanges();
+        hamburger.click();
+        fixture.detectChanges();
+      });
+
+      it('should be closed', () => {
+        expect(sidenav.className).toMatch(/sidenav-clos/);
+      });
+    });
+  });
+
+  describe('SideNav when NOT side-by-side (mobile)', () => {
+    let sidenav: Element;
     let locationService: MockLocationService;
 
     beforeEach(() => {
+      component.onResize(1000); // NOT side-by-side
       locationService = fixture.debugElement.injector.get(LocationService) as any;
-      component.onResize(1000); // side-by-side
+      sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
     });
 
-    it('should have sidenav open when doc in the sidenav (guide/pipes)', () => {
+    it('should be closed when nav to a guide page (guide/pipes)', () => {
       locationService.urlSubject.next('guide/pipes');
-
       fixture.detectChanges();
-      const sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
-      expect(sidenav.className).toMatch(/sidenav-open/);
+      expect(sidenav.className).toMatch(/sidenav-clos/);
     });
 
-    it('should have sidenav open when doc is an api page', () => {
+    it('should be closed when nav to an api page', () => {
       locationService.urlSubject.next('api/a/b/c/d');
-
       fixture.detectChanges();
-      const sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
-      expect(sidenav.className).toMatch(/sidenav-open/);
+      expect(sidenav.className).toMatch(/sidenav-clos/);
     });
 
-    it('should have sidenav closed when doc not in the sidenav (features)', () => {
+    it('should be closed when nav to a marketing page (features)', () => {
       locationService.urlSubject.next('features');
-
       fixture.detectChanges();
-      const sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
       expect(sidenav.className).toMatch(/sidenav-clos/);
     });
   });
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index 3aae674c89..1891d46792 100644
--- a/aio/src/app/app.component.ts
+++ b/aio/src/app/app.component.ts
@@ -76,11 +76,11 @@ export class AppComponent implements OnInit {
       this.currentNode = currentNode;
       this.pageId = this.currentNode.url.replace('/', '-') || 'home';
 
-      // Toggle the sidenav if the kind of view changed
+      // 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.sideNavToggle(this.isSideNavDoc && this.isSideBySide);
     });
 
     this.navigationService.navigationViews.subscribe(views => {