fix(component-sidenav): responsive issues w/ screens 720px to 960px width

- close over sidenav on nav item selection

Fixes #686. Closes #687.

Author: Splaktar

src/app/pages/component-page-header/component-page-header.scss

@@ -23,6 +23,7 @@ h1 {
   margin: 8px;
   min-width: 64px;
   display: none;
+
   @media (max-width: $small-breakpoint-width) {
     display: flex;
     align-items: center;

src/app/pages/component-sidenav/_component-sidenav-theme.scss

@@ -31,7 +31,7 @@
       border-top: solid 1px rgba(mat-color($foreground, secondary-text), .1)
     }
 
-    a {
+    button {
       color: mat-color($foreground, secondary-text);
 
       &.docs-component-viewer-sidenav-item-selected,

src/app/pages/component-sidenav/component-nav.html

@@ -10,12 +10,12 @@
       </button>
       <mat-nav-list dense [@bodyExpansion]="panel.expanded ? 'expanded' : 'collapsed'"
                     id="panel-{{category.id}}" [attr.aria-label]="category.name">
-        <a mat-list-item *ngFor="let component of category.items"
-           [routerLink]="'/' + (params | async)?.section+ '/' + component.id"
-           routerLinkActive="docs-component-viewer-sidenav-item-selected"
-           [attr.aria-current]="currentItemId === component.id ? 'page': 'false'">
+        <button mat-list-item *ngFor="let component of category.items"
+           [ngClass]="{'docs-component-viewer-sidenav-item-selected': currentItemId === component.id}"
+           [attr.aria-current]="currentItemId === component.id ? 'page': 'false'"
+           (click)="selectNavItem(component.id)">
           {{component.name}}
-        </a>
+        </button>
       </mat-nav-list>
       <hr *ngIf="!last" />
     </div>

src/app/pages/component-sidenav/component-sidenav.html

@@ -5,11 +5,11 @@
               [opened]="(isScreenSmall | async) === false"
               [mode]="(isScreenSmall | async) ? 'over' : 'side'"
               [fixedInViewport]="(isScreenSmall | async)"
-              [fixedTopGap]="92">
+              [fixedTopGap]="(isExtraScreenSmall | async) ? 92 : 56">
     <app-component-nav [params]="params"></app-component-nav>
   </mat-sidenav>
   <div class="docs-component-sidenav-content">
-    <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
+    <component-page-header (toggleSidenav)="toggleSidenav(sidenav)"></component-page-header>
     <div class="docs-component-sidenav-inner-content">
       <main class="docs-component-sidenav-body-content">
         <!-- If on large screen, menu resides to left of content -->

src/app/pages/component-sidenav/component-sidenav.service.ts

@@ -0,0 +1,13 @@
+import {Injectable} from '@angular/core';
+import {MatSidenav} from '@angular/material/sidenav';
+
+@Injectable({providedIn : 'root'})
+export class ComponentSidenavService {
+  private _sidenav: MatSidenav;
+
+  constructor() {}
+
+  get sidenav(): MatSidenav { return this._sidenav; }
+
+  set sidenav(value: MatSidenav) { this._sidenav = value; }
+}

src/app/pages/component-sidenav/component-sidenav.ts

@@ -37,9 +37,12 @@ import {HttpClientModule} from '@angular/common/http';
 import {StackBlitzButtonModule} from '../../shared/stack-blitz';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {ExampleModule} from '@angular/components-examples';
+import {ComponentSidenavService} from './component-sidenav.service';
+import {MatDrawerToggleResult} from '@angular/material/sidenav/drawer';
 import {MatListModule} from '@angular/material/list';
 
-const SMALL_WIDTH_BREAKPOINT = 720;
+const EXTRA_SMALL_WIDTH_BREAKPOINT = 720;
+const SMALL_WIDTH_BREAKPOINT = 959;
 
 @Component({
   selector: 'app-component-sidenav',
@@ -50,21 +53,30 @@ const SMALL_WIDTH_BREAKPOINT = 720;
 export class ComponentSidenav implements OnInit {
   @ViewChild(MatSidenav) sidenav: MatSidenav;
   params: Observable<Params>;
+  isExtraScreenSmall: Observable<boolean>;
   isScreenSmall: Observable<boolean>;
 
   constructor(public docItems: DocumentationItems,
               private _route: ActivatedRoute,
+              private componentSidenavService: ComponentSidenavService,
               zone: NgZone,
               breakpoints: BreakpointObserver) {
+    this.isExtraScreenSmall =
+        breakpoints.observe(`(max-width: ${EXTRA_SMALL_WIDTH_BREAKPOINT}px)`)
+            .pipe(map(breakpoint => breakpoint.matches));
     this.isScreenSmall = breakpoints.observe(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`)
-        .pipe(map(breakpoint => breakpoint.matches));
+    .pipe(map(breakpoint => breakpoint.matches));
   }
 
   ngOnInit() {
     // Combine params from all of the path into a single object.
     this.params = combineLatest(
-      this._route.pathFromRoot.map(route => route.params),
-      Object.assign);
+        this._route.pathFromRoot.map(route => route.params), Object.assign);
+  }
+
+  toggleSidenav(sidenav: MatSidenav): Promise<MatDrawerToggleResult> {
+    this.componentSidenavService.sidenav = sidenav;
+    return this.componentSidenavService.sidenav.toggle();
   }
 }
 
@@ -85,8 +97,8 @@ export class ComponentNav implements OnInit, OnDestroy {
   currentItemId: string;
   private _onDestroy = new Subject<void>();
 
-  constructor(public docItems: DocumentationItems,
-              private _router: Router) { }
+  constructor(public docItems: DocumentationItems, private _router: Router,
+              private componentSidenavService: ComponentSidenavService) {}
 
   ngOnInit() {
     this._router.events.pipe(
@@ -135,6 +147,28 @@ export class ComponentNav implements OnInit, OnDestroy {
   getExpanded(category: string): boolean {
     return this.expansions[category] === undefined ? true : this.expansions[category];
   }
+
+  /**
+   * If the component sidenav can be resolved, then close it, and wait for it to be closed,
+   * before navigating to avoid jank.
+   * @param path component.id sub-path to use for navigation
+   */
+  selectNavItem(path: string): void {
+    if (this.componentSidenavService.sidenav) {
+      this.componentSidenavService.sidenav.close().then(() => this.openNavItem(path));
+    } else {
+      this.openNavItem(path);
+    }
+  }
+
+  /**
+   * @param path component.id sub-path to use for navigation
+   */
+  openNavItem(path: string) {
+    this.params.subscribe((params: Params) => {
+      this._router.navigateByUrl(`/${params.section}/${path}`);
+    });
+  }
 }
 
 const routes: Routes = [ {

src/app/pages/guide-list/guide-list.scss

@@ -10,7 +10,7 @@
   flex-grow: 1;
   margin: $content-padding-side;
 
-  @media (max-width: $small-breakpoint-width) {
+  @media (max-width: $extra-small-breakpoint-width) {
     margin: 0;
   }
 }

src/app/pages/guide-viewer/guide-viewer.scss

@@ -30,7 +30,7 @@ $guide-content-margin-side-xs: 15px;
   max-width: 940px;
   margin: 0 auto;
 
-  @media (max-width: $small-breakpoint-width) {
+  @media (max-width: $extra-small-breakpoint-width) {
     flex-direction: column;
   }
 }
@@ -39,7 +39,7 @@ $guide-content-margin-side-xs: 15px;
   flex-grow: 1;
   width: 80%;
 
-  @media (max-width: $small-breakpoint-width) {
+  @media (max-width: $extra-small-breakpoint-width) {
     width: 100%;
   }
 }
@@ -50,7 +50,7 @@ table-of-contents {
 
   // Reposition on top of content on small screens and remove
   // sticky positioning
-  @media (max-width: $small-breakpoint-width) {
+  @media (max-width: $extra-small-breakpoint-width) {
     order: -1;
     position: inherit;
     width: auto;

src/styles/_constants.scss

@@ -1,6 +1,7 @@
 @import '../../node_modules/@angular/material/theming';
 
-$small-breakpoint-width: 720px;
+$extra-small-breakpoint-width: 720px;
+$small-breakpoint-width: 959px;
 
 /* For desktop, the content should be aligned with the page title. */
 $content-padding-side: 70px;