docs: make nav tabs sticky for easier navigation while scrolling (#32011)

Author: MeAkib

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

@@ -1,14 +1,23 @@
 <div class="docs-component-viewer">
-  <nav mat-tab-nav-bar mat-stretch-tabs="false" class="docs-component-viewer-tabbed-content"
-       aria-label="Documentation Sections"
-       id="component-viewer"
-       focusOnNavigation
-       [tabPanel]="panel">
+  <nav
+    mat-tab-nav-bar
+    mat-stretch-tabs="false"
+    class="docs-component-viewer-tabbed-content docs-sticky-top"
+    aria-label="Documentation Sections"
+    id="component-viewer"
+    focusOnNavigation
+    [tabPanel]="panel"
+  >
     @for (section of sections; track section) {
-      <a mat-tab-link class="docs-component-viewer-section-tab"
-          [routerLink]="section.toLowerCase()"
-          routerLinkActive #rla="routerLinkActive"
-          [active]="rla.isActive">{{section}}</a>
+      <a
+        mat-tab-link
+        class="docs-component-viewer-section-tab"
+        [routerLink]="section.toLowerCase()"
+        routerLinkActive
+        #rla="routerLinkActive"
+        [active]="rla.isActive"
+        >{{section}}</a
+      >
     }
   </nav>
 

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

@@ -30,6 +30,13 @@ app-component-viewer {
 
 .docs-component-viewer-tabbed-content {
   margin-bottom: 25px;
+
+  &.docs-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