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

@@ -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);

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>

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;
     }

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;
+  width: 93%;
-  transition-property: background-color, color;
-  transition-timing-function: ease-in-out;
-  width: 100%;
   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;
+  margin-right: 0;
-
+  padding-left: 6px;
-  &:focus {
+  padding-top: 8px;
-    color: $black;
+  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;
+  margin-left: 10px;
-  padding-left: 8px;
 }
 
 .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 {

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;
 }