From 4459e0c1c8ae0c5ed52da6f055c1e486885a215f Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Wed, 28 Jun 2017 17:10:35 -0700
Subject: [PATCH] fix(aio): restore visible sidenav keyboard focus; shift TOC
 up

closes #17665
Restores keyboard focus that was removed by commit b8b91d3.
Raises the right-TOC by 20px (96px->76px) because was too far down.

To prevent keyboard focus on hidden child nodes,
also collapses inner expanded nodes when parent node is collapsed.
The implicit parent node of top nodes is always expanded.
---
 aio/src/app/app.component.ts                  |  2 +-
 .../layout/nav-item/nav-item.component.html   |  1 +
 .../app/layout/nav-item/nav-item.component.ts |  6 ++-
 aio/src/styles/1-layouts/_sidenav.scss        | 41 +++++++++----------
 aio/src/styles/2-modules/_toc.scss            |  4 +-
 5 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index 1f44e91a8a..5dbecf8aa4 100644
--- a/aio/src/app/app.component.ts
+++ b/aio/src/app/app.component.ts
@@ -277,7 +277,7 @@ export class AppComponent implements OnInit {
       this.tocMaxHeightOffset =
           el.querySelector('footer').clientHeight +
           el.querySelector('md-toolbar.app-toolbar').clientHeight +
-          44; //  margin
+          24; //  fudge margin
     }
 
     this.tocMaxHeight = (document.body.scrollHeight - window.pageYOffset - this.tocMaxHeightOffset).toFixed(2);
diff --git a/aio/src/app/layout/nav-item/nav-item.component.html b/aio/src/app/layout/nav-item/nav-item.component.html
index aae67c7a80..799feab04f 100644
--- a/aio/src/app/layout/nav-item/nav-item.component.html
+++ b/aio/src/app/layout/nav-item/nav-item.component.html
@@ -21,6 +21,7 @@
 
   <div class="heading-children" [ngClass]="classes">
     <aio-nav-item *ngFor="let node of nodeChildren" [level]="level + 1" [isWide]="isWide"
+    [isParentExpanded]="isExpanded"
     [node]="node" [selectedNodes]="selectedNodes"></aio-nav-item>
   </div>
 </div>
diff --git a/aio/src/app/layout/nav-item/nav-item.component.ts b/aio/src/app/layout/nav-item/nav-item.component.ts
index 80deac472c..a62612f834 100644
--- a/aio/src/app/layout/nav-item/nav-item.component.ts
+++ b/aio/src/app/layout/nav-item/nav-item.component.ts
@@ -9,6 +9,7 @@ export class NavItemComponent implements OnChanges {
   @Input() isWide = false;
   @Input() level = 1;
   @Input() node: NavigationNode;
+  @Input() isParentExpanded = true;
   @Input() selectedNodes: NavigationNode[];
 
   isExpanded = false;
@@ -22,9 +23,10 @@ export class NavItemComponent implements OnChanges {
     if (this.selectedNodes) {
       const ix = this.selectedNodes.indexOf(this.node);
       this.isSelected = ix !== -1; // this node is the selected node or its ancestor
-      this.isExpanded = this.isSelected || // expand if selected or ...
+      this.isExpanded = this.isParentExpanded &&
+        (this.isSelected || // expand if selected or ...
         // preserve expanded state when display is wide; collapse in mobile.
-        (this.isWide && this.isExpanded);
+        (this.isWide && this.isExpanded));
     } else {
       this.isSelected = false;
     }
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 880b27f0ae..cc0445e9f6 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -22,7 +22,7 @@ aio-nav-menu {
   }
 
   aio-nav-item div a {
-    padding-left: 16px;
+    padding-left: 6px;
   }
 }
 
@@ -67,27 +67,26 @@ md-sidenav-container div.mat-sidenav-content {
   overflow-wrap: break-word;
   padding-top: 4px;
   padding-bottom: 4px;
-  padding-left: 16px;
   text-decoration: none;
   text-align: left;
-  transition-duration: 180ms;
-  transition-property: background-color, color;
-  transition-timing-function: ease-in-out;
-  width: 100%;
+  width: 93%;
   word-wrap: break-word;
-  outline: none;
-  transition: all 0.3s ease-in-out;
 
   &:hover {
-    text-shadow: 0 0 5px #ffffff;
+    background-color: $lightgray;
     color: $blue;
+    text-shadow: 0 0 5px #ffffff;
+  }
+
+  &:focus {
+    outline: $accentblue auto 2px;
   }
 
   //icons _within_ nav
   .mat-icon {
     position: absolute;
     top: 0;
-    right: 8px;
+    right: 0;
     margin: 4px;
   }
 }
@@ -99,11 +98,10 @@ md-sidenav-container div.mat-sidenav-content {
 button.vertical-menu-item {
   border: none;
   background-color: transparent;
-  padding: 8px 0 8px 20px;
-
-  &:focus {
-    color: $black;
-  }
+  margin-right: 0;
+  padding-left: 6px;
+  padding-top: 8px;
+  padding-bottom: 10px;
 }
 
 .heading {
@@ -111,7 +109,6 @@ button.vertical-menu-item {
   cursor: pointer;
   position: relative;
   text-transform: uppercase;
-  width: 100%;
 }
 
 .heading-children.expanded {
@@ -136,25 +133,25 @@ button.vertical-menu-item {
   font-family: $main-font;
   font-size: 14px;
   font-weight: 400;
-  padding-left: 20px;
+  margin-left: 14px;
   transition: background-color 0.2s;
   text-transform: uppercase;
 }
 
 .level-2 {
+  color: $mediumgray;
   font-family: $main-font;
   font-size: 14px;
-  color: $mediumgray;
   font-weight: 400;
-  padding-left: 20px;
+  margin-left: 12px;
   text-transform: none;
 }
 
 .level-3 {
+  color: $mediumgray;
   font-family: $main-font;
   font-size: 14px;
-  color: $mediumgray;
-  padding-left: 8px;
+  margin-left: 10px;
 }
 
 .level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
@@ -163,7 +160,7 @@ button.vertical-menu-item {
 
 .level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
   @include rotate(0deg);
-  margin: 4px;
+ // margin: 4px;
 }
 
 .promo-img-container img {
diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss
index 8495984d4f..c4a2f08b78 100644
--- a/aio/src/styles/2-modules/_toc.scss
+++ b/aio/src/styles/2-modules/_toc.scss
@@ -1,9 +1,9 @@
 .toc-container {
   width: 18%;
   position: fixed;
-  top: 96px;
+  top: 76px;
   right: 0;
-  bottom: 32px;
+  bottom: 12px;
   overflow-y: auto;
   overflow-x: hidden;
 }