Skip to content

Commit e6204d5

Browse files
MeAkibcrisbeto
authored andcommitted
docs: make nav tabs sticky for easier navigation while scrolling (angular#32011)
(cherry picked from commit fe67233)
1 parent dfe3789 commit e6204d5

File tree

2 files changed

+28
-11
lines changed

2 files changed

+28
-11
lines changed

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

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
<div class="docs-component-viewer">
2-
<nav mat-tab-nav-bar mat-stretch-tabs="false" class="docs-component-viewer-tabbed-content"
3-
aria-label="Documentation Sections"
4-
id="component-viewer"
5-
focusOnNavigation
6-
[tabPanel]="panel">
2+
<nav
3+
mat-tab-nav-bar
4+
mat-stretch-tabs="false"
5+
class="docs-component-viewer-tabbed-content docs-sticky-top"
6+
aria-label="Documentation Sections"
7+
id="component-viewer"
8+
focusOnNavigation
9+
[tabPanel]="panel"
10+
>
711
@for (section of sections; track section) {
8-
<a mat-tab-link class="docs-component-viewer-section-tab"
9-
[routerLink]="section.toLowerCase()"
10-
routerLinkActive #rla="routerLinkActive"
11-
[active]="rla.isActive">{{section}}</a>
12+
<a
13+
mat-tab-link
14+
class="docs-component-viewer-section-tab"
15+
[routerLink]="section.toLowerCase()"
16+
routerLinkActive
17+
#rla="routerLinkActive"
18+
[active]="rla.isActive"
19+
>{{section}}</a
20+
>
1221
}
1322
</nav>
1423

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,13 @@ app-component-viewer {
3030

3131
.docs-component-viewer-tabbed-content {
3232
margin-bottom: 25px;
33+
34+
&.docs-sticky-top {
35+
position: sticky;
36+
top: 0;
37+
z-index: 1;
38+
background: var(--mat-sys-surface);
39+
}
3340
}
3441

3542
.docs-component-viewer-content {
@@ -38,7 +45,8 @@ app-component-viewer {
3845

3946
// Display outlet components with toc as flex and switch to
4047
// vertical direction on small screens
41-
component-overview, component-api {
48+
component-overview,
49+
component-api {
4250
display: flex;
4351
align-items: flex-start;
4452
overflow: visible;
@@ -49,7 +57,7 @@ app-component-viewer {
4957
}
5058

5159
table-of-contents {
52-
top: 35px;
60+
top: 50px;
5361
position: sticky;
5462

5563
// Reposition on top of content on small screens and remove

0 commit comments

Comments
 (0)