From 781fac1c8b0c47aac2254e1343ca235d3ec87971 Mon Sep 17 00:00:00 2001
From: MeAkib <akibh805@gmail.com>
Date: Tue, 7 Oct 2025 21:16:19 +0600
Subject: [PATCH] docs: make nav tabs sticky for easier navigation while
 scrolling

---
 .../component-viewer/component-viewer.html    | 27 ++++++++++++-------
 .../component-viewer/component-viewer.scss    | 12 +++++++--
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/docs/src/app/pages/component-viewer/component-viewer.html b/docs/src/app/pages/component-viewer/component-viewer.html
index b6b6d1741cd0..e1a727e9aa17 100644
--- a/docs/src/app/pages/component-viewer/component-viewer.html
+++ b/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>
 
diff --git a/docs/src/app/pages/component-viewer/component-viewer.scss b/docs/src/app/pages/component-viewer/component-viewer.scss
index 7deb818572fe..c0c1f56421a6 100644
--- a/docs/src/app/pages/component-viewer/component-viewer.scss
+++ b/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