docs: make nav tabs sticky for easier navigation while scrolling

Author: MeAkib

docs/src/app/pages/component-viewer/component-viewer.html

@@ -1,5 +1,5 @@
 <div class="docs-component-viewer">
-  <nav mat-tab-nav-bar mat-stretch-tabs="false" class="docs-component-viewer-tabbed-content"
+  <nav mat-tab-nav-bar mat-stretch-tabs="false" class="docs-component-viewer-tabbed-content sticky-top"
        aria-label="Documentation Sections"
        id="component-viewer"
        focusOnNavigation

docs/src/app/pages/component-viewer/component-viewer.scss

@@ -30,6 +30,13 @@ app-component-viewer {
 
 .docs-component-viewer-tabbed-content {
   margin-bottom: 25px;
+
+  &.sticky-top {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--mat-sys-surface);
+  }
 }
 
 .docs-component-viewer-content {
@@ -38,7 +45,8 @@ app-component-viewer {
 
   // Display outlet components with toc as flex and switch to
   // vertical direction on small screens
-  component-overview, component-api {
+  component-overview,
+  component-api {
     display: flex;
     align-items: flex-start;
     overflow: visible;
@@ -49,7 +57,7 @@ app-component-viewer {
   }
 
   table-of-contents {
-    top: 35px;
+    top: 50px;
     position: sticky;
 
     // Reposition on top of content on small screens and remove