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

fix(aio): group topbar items into a single sidenav node when narrow screen (#17001)

Browse Source 
The `TopBarNarrow` now only shows a single top level container, "About Angular",
and the original `TopBar` items will be children of this container.

The `TopBarNarrow` styling is changed to match the rest of the `SideNav`.
This commit is contained in:
Pete Bacon Darwin 2017-05-26 00:44:27 +01:00 committed by Chuck Jazdzewski
parent b37a0484d4
commit 2538094e13
3 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
aio/content/navigation.json
View File

@ -20,20 +20,21 @@
"TopBarNarrow": [ "TopBarNarrow": [
{ {
"url": "features", "title": "About Angular",
"title": "Features" "children": [
}, {
{ "url": "features",
"url": "resources", "title": "Features"
"title": "Resources" },
}, {
{ "url": "resources",
"url": "events", "title": "Resources"
"title": "Events" },
}, {
{ "url": "events",
"url": "docs", "title": "Events"
"title": "Docs:" }
]
} }
], ],

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

@ -17,7 +17,7 @@
<md-sidenav-container class="sidenav-container" [class.starting]="isStarting" role="main"> <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()"> <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]="topMenuNarrowNodes" [currentNode]="currentNode"></aio-nav-menu> <aio-nav-menu *ngIf="!isSideBySide" [nodes]="topMenuNarrowNodes" [currentNode]="currentNode"></aio-nav-menu>
<aio-nav-menu [nodes]="sideNavNodes" [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}}"> <div class="doc-version" title="Angular docs version {{currentDocVersion?.title}}">

8
aio/src/styles/1-layouts/_sidenav.scss
View File

@ -8,12 +8,6 @@
} }
} }
// SMALL SCREEN -> TOP NAV SLIDES INTO SIDENAV
aio-nav-menu.top-menu .vertical-menu-item {
background-color: $lightgray;
text-transform: uppercase;
}
md-sidenav.mat-sidenav.sidenav { md-sidenav.mat-sidenav.sidenav {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -24,7 +18,7 @@ md-sidenav.mat-sidenav.sidenav {
box-shadow: 6px 0 6px rgba(0,0,0,0.10); box-shadow: 6px 0 6px rgba(0,0,0,0.10);
&.collapsed { &.collapsed {
padding-top: 32px; padding-top: 64px;
} }
} }