feat(aio): close sidenav in narrow (mobile) mode when select a new do…

…cument (angular#16617)

closes angular#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

@@ -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', () => {

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 => {