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

feat(aio): hide side nav in mobile mode 

Don’t show the side nav in mobile (not side-by-side) view when arriving or navigating.
Only show it by request.

The side nav should continue to appear in wide mode (side-by-side) when navigating from a marketing page to a guide page.
This commit is contained in:
Ward Bell 2017-04-10 12:44:54 -07:00 committed by Hans
parent 909264feb5
commit 8cfa58715c
2 changed files with 56 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,35 +71,76 @@ describe('AppComponent', () => {
});
});
describe('shows/hide SideNav based on doc\'s navigation view', () => {
describe('SideNav when side-by-side', () => {
let hamburger: HTMLButtonElement;
let locationService: MockLocationService;
let sidenav: Element;
beforeEach(() => {
component.onResize(1033); // side-by-side
locationService = fixture.debugElement.injector.get(LocationService) as any;
hamburger = fixture.debugElement.query(By.css('.hamburger')).nativeElement;
sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
});
it('should open when nav to a guide page (guide/pipes)', () => {
locationService.urlSubject.next('guide/pipes');
fixture.detectChanges();
expect(sidenav.className).toMatch(/sidenav-open/);
});
it('should open when nav to an api page', () => {
locationService.urlSubject.next('api/a/b/c/d');
fixture.detectChanges();
expect(sidenav.className).toMatch(/sidenav-open/);
});
it('should be closed when nav to a marketing page (features)', () => {
locationService.urlSubject.next('features');
fixture.detectChanges();
expect(sidenav.className).toMatch(/sidenav-clos/);
});
describe('when manually closed', () => {
beforeEach(() => {
locationService.urlSubject.next('guide/pipes');
fixture.detectChanges();
hamburger.click();
fixture.detectChanges();
});
it('should be closed', () => {
expect(sidenav.className).toMatch(/sidenav-clos/);
});
});
});
describe('SideNav when NOT side-by-side (mobile)', () => {
let sidenav: Element;
let locationService: MockLocationService;
beforeEach(() => {
component.onResize(1000); // NOT side-by-side
locationService = fixture.debugElement.injector.get(LocationService) as any;
component.onResize(1000); // side-by-side
sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
});
it('should have sidenav open when doc in the sidenav (guide/pipes)', () => {
it('should be closed when nav to a guide page (guide/pipes)', () => {
locationService.urlSubject.next('guide/pipes');
fixture.detectChanges();
const sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
expect(sidenav.className).toMatch(/sidenav-open/);
expect(sidenav.className).toMatch(/sidenav-clos/);
});
it('should have sidenav open when doc is an api page', () => {
it('should be closed when nav to an api page', () => {
locationService.urlSubject.next('api/a/b/c/d');
fixture.detectChanges();
const sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
expect(sidenav.className).toMatch(/sidenav-open/);
expect(sidenav.className).toMatch(/sidenav-clos/);
});
it('should have sidenav closed when doc not in the sidenav (features)', () => {
it('should be closed when nav to a marketing page (features)', () => {
locationService.urlSubject.next('features');
fixture.detectChanges();
const sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
expect(sidenav.className).toMatch(/sidenav-clos/);
});
});

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

@ -76,11 +76,11 @@ export class AppComponent implements OnInit {
this.currentNode = currentNode;
this.pageId = this.currentNode.url.replace('/', '-') || 'home';
// Toggle the sidenav if the kind of view changed
// 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.sideNavToggle(this.isSideNavDoc && this.isSideBySide);
});
this.navigationService.navigationViews.subscribe(views => {