honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(aio): show top-nav with same styling as side-nav when window is narrow

Browse Source 
Fixes #15490
This commit is contained in:
Peter Bacon Darwin 2017-03-28 10:12:28 +01:00 committed by Pete Bacon Darwin
parent 9e0d7be014
commit b7a89cec59
4 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
aio/src/app/app.component.html
View File

@ -1,6 +1,7 @@
<md-toolbar color="primary" class="app-toolbar"> <md-toolbar color="primary" class="app-toolbar">
<button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button> <button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
<aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu> <a class="nav-link home" href="/"><img [src]="homeImageUrl" title="Home" alt="Home"></a>
<aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
<aio-search-box class="search-container" #searchBox></aio-search-box> <aio-search-box class="search-container" #searchBox></aio-search-box>
<span class="fill-remaining-space"></span> <span class="fill-remaining-space"></span>
</md-toolbar> </md-toolbar>
@ -8,7 +9,7 @@
<md-sidenav-container class="sidenav-container"> <md-sidenav-container class="sidenav-container">
<md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'"> <md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
<aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu> <aio-nav-menu *ngIf="!isSideBySide" [nodes]="(navigationViews | async)?.TopBar" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
<aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu> <aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
</md-sidenav> </md-sidenav>

6
aio/src/app/app.component.ts
View File

@ -15,7 +15,11 @@ import { AutoScrollService } from 'app/shared/auto-scroll.service';
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
readonly sideBySideWidth = 600; readonly sideBySideWidth = 600;
readonly homeImageUrl = 'assets/images/logos/standard/logo-nav.png'; get homeImageUrl() {
return this.isSideBySide ?
'assets/images/logos/standard/logo-nav.png' :
'assets/images/logos/standard/logo-nav-small.png';
}
isHamburgerVisible = true; // always ... for now isHamburgerVisible = true; // always ... for now
isSideBySide = false; isSideBySide = false;

4
aio/src/app/layout/top-menu/top-menu.component.ts
View File

@ -5,7 +5,6 @@ import { NavigationNode } from 'app/navigation/navigation.service';
selector: 'aio-top-menu', selector: 'aio-top-menu',
template: ` template: `
<ul role="navigation"> <ul role="navigation">
<li><a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a></li>
<li *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></li> <li *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></li>
</ul>`, </ul>`,
styles: [` styles: [`
@ -44,7 +43,4 @@ import { NavigationNode } from 'app/navigation/navigation.service';
export class TopMenuComponent { export class TopMenuComponent {
@Input() @Input()
nodes: NavigationNode[]; nodes: NavigationNode[];
@Input()
homeImageUrl: string;
} }

BIN
aio/src/assets/images/logos/standard/logo-nav-small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB