fix(aio): use a special version of the TopBar if the screen is narrow

If there is a `TopBarNarrow` nav view then use this when the screen is narrow.
Otherwise just use the normal `TopBar`.

This commit also creates such a narrow topbar view where the "Docs" item is
in a different position

Closes #16940
This commit is contained in:
Peter Bacon Darwin 2017-05-23 17:10:27 +01:00 committed by Pete Bacon Darwin
parent 9e17a147ec
commit 19a509a92c
3 changed files with 22 additions and 1 deletions

View File

@ -18,6 +18,25 @@
}
],
"TopBarNarrow": [
{
"url": "features",
"title": "Features"
},
{
"url": "resources",
"title": "Resources"
},
{
"url": "events",
"title": "Events"
},
{
"url": "docs",
"title": "Docs:"
}
],
"SideNav": [
{
"url": "docs",

View File

@ -17,7 +17,7 @@
<md-sidenav-container class="sidenav-container" [class.starting]="isStarting" role="main">
<md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode" (open)="updateHostClasses()" (close)="updateHostClasses()">
<aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu>
<aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNarrowNodes" [currentNode]="currentNode"></aio-nav-menu>
<aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu>
<div class="doc-version" title="Angular docs version {{currentDocVersion?.title}}">

View File

@ -64,6 +64,7 @@ export class AppComponent implements OnInit {
private sideBySideWidth = 1032;
sideNavNodes: NavigationNode[];
topMenuNodes: NavigationNode[];
topMenuNarrowNodes: NavigationNode[];
tocMaxHeight: string;
private tocMaxHeightOffset = 0;
versionInfo: VersionInfo;
@ -161,6 +162,7 @@ export class AppComponent implements OnInit {
this.footerNodes = views['Footer'] || [];
this.sideNavNodes = views['SideNav'] || [];
this.topMenuNodes = views['TopBar'] || [];
this.topMenuNarrowNodes = views['TopBarNarrow'] || this.topMenuNodes;
});
this.navigationService.versionInfo.subscribe( vi => this.versionInfo = vi );