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

feat(aio): close sidenav in narrow (mobile) mode when select a new document (#16617) 

closes #16603
As before this PR, when wide (side-by-side), the sidenav open/close status only changes when nav to/from marketing page in which case it opens for guide/api and closes for marketing page.
This commit is contained in:
Ward Bell 2017-05-08 15:41:19 -07:00 committed by Miško Hevery
parent 041f57cb7d
commit 3887d8a429
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
aio/src/app/app.component.spec.ts
View File

@ -118,13 +118,13 @@ describe('AppComponent', () => {
expect(sidenav.className).toMatch(/sidenav-clos/);
});
it('should stay closed when nav to another guide page', () => {
it('should stay closed when nav from one guide page to another', () => {
locationService.go('guide/bags');
fixture.detectChanges();
expect(sidenav.className).toMatch(/sidenav-clos/);
});
it('should stay closed when nav to api page', () => {
it('should stay closed when nav from a guide page to api page', () => {
locationService.go('api');
fixture.detectChanges();
expect(sidenav.className).toMatch(/sidenav-clos/);
@ -184,16 +184,16 @@ describe('AppComponent', () => {
expect(sidenav.className).toMatch(/sidenav-clos/);
});
it('should stay open when nav to another guide page', () => {
it('should close when nav to another guide page', () => {
locationService.go('guide/bags');
fixture.detectChanges();
expect(sidenav.className).toMatch(/sidenav-open/);
expect(sidenav.className).toMatch(/sidenav-clos/);
});
it('should stay open when nav to api page', () => {
it('should close when nav to api page', () => {
locationService.go('api');
fixture.detectChanges();
expect(sidenav.className).toMatch(/sidenav-open/);
expect(sidenav.className).toMatch(/sidenav-clos/);
});
it('should close again when nav to market page', () => {

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

@ -116,13 +116,18 @@ export class AppComponent implements OnInit {
this.navigationService.currentNode.subscribe(currentNode => {
this.currentNode = currentNode;
this.updateHostClasses();
// Toggle the sidenav if side-by-side and the kind of view changed
if (this.previousNavView === currentNode.view) { return; }
this.previousNavView = currentNode.view;
this.isSideNavDoc = currentNode.view === sideNavView;
this.sideNavToggle(this.isSideNavDoc && this.isSideBySide);
// Preserve current sidenav open state by default
let openSideNav = this.sidenav.opened;
if (this.previousNavView !== currentNode.view) {
this.previousNavView = currentNode.view;
// View type changed. Is it now a sidenav view (e.g, guide or tutorial)?
// Open if changed to a sidenav doc; close if changed to a marketing doc.
openSideNav = this.isSideNavDoc = currentNode.view === sideNavView;
}
// May be open or closed when wide; always closed when narrow
this.sideNavToggle(this.isSideBySide ? openSideNav : false);
});
this.navigationService.navigationViews.subscribe(views => {