fix(docs-infra): return full width highlight to sidenav (#31246)

PR Close #31246

aio/src/app/layout/nav-item/nav-item.component.html

@@ -1,21 +1,21 @@
 <div *ngIf="!node.children">
   <a href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
     class="vertical-menu-item">
-    {{node.title}}
+    <span>{{node.title}}</span>
   </a>
 </div>
 
 <div *ngIf="node.children">
   <a *ngIf="node.url != null" href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
     (click)="headerClicked()" class="vertical-menu-item heading">
-    {{node.title}}
+    <span>{{node.title}}</span>
     <mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
   </a>
 
   <button *ngIf="node.url == null" type="button" [ngClass]="classes" title="{{node.tooltip}}"
     (click)="headerClicked()" class="vertical-menu-item heading"
     [attr.aria-pressed]="isExpanded">
-    {{node.title}}
+    <span>{{node.title}}</span>
     <mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
   </button>
 

aio/src/styles/1-layouts/_sidenav.scss

@@ -6,9 +6,10 @@
 aio-nav-menu {
   display: block;
   margin: 0 auto;
+  max-width: 260px;
   @include font-size(13);
+
   ul, a {
-    padding: 0;
     margin: 0;
   }
 
@@ -61,14 +62,14 @@ mat-sidenav-container div.mat-sidenav-content {
   box-sizing: border-box;
   color: $darkgray;
   cursor: pointer;
-  display: block;
+  display: flex;
-  max-width: 260px;
+  align-items: center;
+  justify-content: space-between;
   overflow-wrap: break-word;
-  padding-top: 4px;
+  padding: 8px;
-  padding-bottom: 4px;
   text-decoration: none;
   text-align: left;
-  width: 93%;
+  width: 100%;
   word-wrap: break-word;
 
   &:hover {
@@ -81,26 +82,37 @@ mat-sidenav-container div.mat-sidenav-content {
     outline: $accentblue auto 2px;
   }
 
+  &.selected {
+    color: $blue;
+  }
+
+  &.level-2 {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+
+  span {
+    padding-right: 32px;
+  }
+
   //icons _within_ nav
   .mat-icon {
-    position: absolute;
+    // position: absolute;
-    top: 0;
+    // top: 8px;
-    right: 0;
+    // right: 8px;
-    margin: 4px;
+    // margin: 0;
+    height: 24px;
+    width: 24px;
   }
 }
 
-.vertical-menu-item.selected {
-  color: $blue;
-}
-
 button.vertical-menu-item {
   border: none;
   background-color: transparent;
-  margin-right: 0;
+  padding-top: 10px;
-  padding-left: 6px;
-  padding-top: 8px;
   padding-bottom: 10px;
+  margin: 0;
+  width: 100%;
 }
 
 .heading {
@@ -110,27 +122,32 @@ button.vertical-menu-item {
   text-transform: uppercase;
 }
 
-.heading-children.expanded {
+.heading-children {
-  visibility: visible;
+  &.expanded {
-  opacity: 1;
+    visibility: visible;
-  max-height: 4000px; // Arbitrary max-height. Can increase if needed. Must have measurement to transition height.
+    opacity: 1;
-  transition: visibility 500ms, opacity 500ms, max-height 500ms;
+    padding-left: 0;
-  -webkit-transition-timing-function: ease-in-out;
+    max-height: 4000px; // Arbitrary max-height. Can increase if needed. Must have measurement to transition height.
-  transition-timing-function: ease-in-out;
+    transition: visibility 500ms, opacity 500ms, max-height 500ms;
-}
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+  }
 
-.heading-children.collapsed {
+  &.collapsed {
-  overflow: hidden;  // Needed to prevent unnecessary sidenav scrollbar.
+    overflow: hidden;  // Needed to prevent unnecessary sidenav scrollbar.
-  visibility: hidden;
+    visibility: hidden;
-  opacity: 0;
+    padding-left: 0;
-  max-height: 1px; // Must have measurement to transition height.
+    opacity: 0;
-  transition: visibility 275ms, opacity 275ms, max-height 280ms;
+    max-height: 1px; // Must have measurement to transition height.
-  -webkit-transition-timing-function: ease-out;
+    transition: visibility 275ms, opacity 275ms, max-height 280ms;
-  transition-timing-function: ease-out;
+    -webkit-transition-timing-function: ease-out;
+    transition-timing-function: ease-out;
+  }
 }
 
 .no-animations {
-  .heading-children.expanded, .heading-children.collapsed {
+  .heading-children.expanded,
+  .heading-children.collapsed {
     transition: none! important;
   }
 }
@@ -139,9 +156,19 @@ button.vertical-menu-item {
   font-family: $main-font;
   @include font-size(14);
   font-weight: 400;
-  margin-left: 14px;
+  padding-left: 20px;
+  margin: 0;
   transition: background-color 0.2s;
   text-transform: uppercase;
+
+  &.expanded .mat-icon, .level-2.expanded .mat-icon {
+    @include rotate(90deg);
+  }
+
+  &:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
+    @include rotate(0deg);
+  }
+
 }
 
 .level-2 {
@@ -149,7 +176,8 @@ button.vertical-menu-item {
   font-family: $main-font;
   @include font-size(14);
   font-weight: 400;
-  margin-left: 12px;
+  margin: 0;
+  padding-left: 32px;
   text-transform: none;
 }
 
@@ -157,15 +185,8 @@ button.vertical-menu-item {
   color: $mediumgray;
   font-family: $main-font;
   @include font-size(14);
-  margin-left: 10px;
+  margin: 0;
-}
+  padding-left: 40px;
-
-.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
-  @include rotate(90deg);
-}
-
-.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
-  @include rotate(0deg);
 }
 
 aio-nav-menu.top-menu {