feat(aio): positioning UX for nav and search

aio/src/app/app.component.html

@@ -11,7 +11,7 @@
 
 <md-sidenav-container class="sidenav-container">
 
-  <md-sidenav #sidenav class="sidenav" [opened]="isOpened" [mode]="mode">
+  <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode">
     <aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu>
     <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu>
   </md-sidenav>

aio/src/styles/1-layouts/_search-results.scss

@@ -5,10 +5,10 @@ aio-search-results {
 .search-results {
     display: flex;
     flex-direction: row;
-    overflow: scroll;
-    padding-top: 50px;
+    overflow: auto;
+    padding: 68px 32px 0;
     color: $offwhite;
-    width: 100%;
+    width: auto;
     max-height: 40%;
     position: fixed;
     top: 0;
@@ -16,7 +16,7 @@ aio-search-results {
     right: 0;
     z-index: 5;
     background-color: $darkgray;
-    border: 24px solid $darkgray;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
 
     @media (max-width: 480px) {
         display: block;

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

@@ -6,15 +6,20 @@ aio-nav-menu.top-menu .vertical-menu-item  {
 .mat-sidenav.sidenav {
   box-shadow: 6px 0 6px rgba(0,0,0,0.10);
   background-color: $offwhite;
-  padding: 10px 0px 0px;
+  padding: 80px 0px 0px;
   min-width: 260px;
 }
 
+md-sidenav.mat-sidenav.sidenav.collapsed {
+    padding-top: 32px;
+}
+
 md-sidenav-container.sidenav-container {
     min-height: 100%;
     height: auto !important;
     margin: 0 auto;
     transform: none;
+    padding-top: 52px;
 }
 
 // md-sidenav.sidenav.mat-sidenav.mat-sidenav-side.mat-sidenav-opened {
@@ -145,3 +150,14 @@ a.selected.level-1,
     max-width: 100%;
   }
 }
+
+aio-nav-menu.top-menu {
+  aio-nav-item:first-child .vertical-menu-item {
+    padding-top: 48px;
+  }
+
+  aio-nav-item:last-child div {
+    border-bottom: 2px solid rgba($mediumgray, 0.5);
+  }
+  
+}

aio/src/styles/1-layouts/_top-menu.scss

@@ -55,7 +55,10 @@ aio-top-menu {
 }
 
 md-toolbar.mat-toolbar {
-  position: relative;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
   z-index: 10;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
   padding: 0 16px 0 0;