diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 96508b6f66b5e..f46fa75a16239 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -35,9 +35,7 @@
-
-
-
+
diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index e6d37a15d2a2e..7388c4f7ca322 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -75,6 +75,13 @@ describe('AppComponent', () => {
component.onResize(500);
expect(component.isSideBySide).toBe(false);
});
+
+ it('should update `showFloatingToc` accordingly', () => {
+ component.onResize(801);
+ expect(component.showFloatingToc).toBe(true);
+ component.onResize(800);
+ expect(component.showFloatingToc).toBe(false);
+ });
});
describe('onScroll', () => {
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index d6fce322375e3..f23eb9c41a3ca 100644
--- a/aio/src/app/app.component.ts
+++ b/aio/src/app/app.component.ts
@@ -65,8 +65,12 @@ export class AppComponent implements OnInit {
sideNavNodes: NavigationNode[];
topMenuNodes: NavigationNode[];
topMenuNarrowNodes: NavigationNode[];
+
+ showFloatingToc = false;
+ showFloatingTocWidth = 800;
tocMaxHeight: string;
private tocMaxHeightOffset = 0;
+
versionInfo: VersionInfo;
get homeImageUrl() {
@@ -198,6 +202,7 @@ export class AppComponent implements OnInit {
@HostListener('window:resize', ['$event.target.innerWidth'])
onResize(width) {
this.isSideBySide = width > this.sideBySideWidth;
+ this.showFloatingToc = width > this.showFloatingTocWidth;
}
@HostListener('click', ['$event.target', '$event.button', '$event.ctrlKey', '$event.metaKey', '$event.altKey'])
diff --git a/aio/src/app/embedded/toc/toc.component.html b/aio/src/app/embedded/toc/toc.component.html
index 9bc80a615ea6b..df1b891bc7805 100644
--- a/aio/src/app/embedded/toc/toc.component.html
+++ b/aio/src/app/embedded/toc/toc.component.html
@@ -1,11 +1,11 @@
-
-
+
-
Contents
+
+ Contents
+
-
- -
-
-
+
+ - = primaryMax" [class.active]="i === activeIndex">
+
+
+
-