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:
parent
9e17a147ec
commit
19a509a92c
|
@ -18,6 +18,25 @@
|
|||
}
|
||||
],
|
||||
|
||||
"TopBarNarrow": [
|
||||
{
|
||||
"url": "features",
|
||||
"title": "Features"
|
||||
},
|
||||
{
|
||||
"url": "resources",
|
||||
"title": "Resources"
|
||||
},
|
||||
{
|
||||
"url": "events",
|
||||
"title": "Events"
|
||||
},
|
||||
{
|
||||
"url": "docs",
|
||||
"title": "Docs:"
|
||||
}
|
||||
],
|
||||
|
||||
"SideNav": [
|
||||
{
|
||||
"url": "docs",
|
||||
|
|
|
@ -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}}">
|
||||
|
|
|
@ -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 );
|
||||
|
|
Loading…
Reference in New Issue