Skip to content

Commit 61579bc

Browse files
mmalerbajelbourn
mmalerba
authored and
jelbourn
committed
feat(sidenav): Add support for fixed sidenavs (#6712)
1 parent dbae360 commit 61579bc

19 files changed

+592
-261
lines changed

‎src/demo-app/demo-app/demo-app.ts‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
1-
import {
2-
Component,
3-
ViewEncapsulation,
4-
ElementRef,
5-
Renderer2,
6-
} from '@angular/core';
71
import {OverlayContainer} from '@angular/cdk/overlay';
2+
import {Component, ElementRef, Renderer2, ViewEncapsulation} from '@angular/core';
83

94
/**
105
* The entry app for demo site. Routes under `accessibility` will use AccessibilityDemo component,
@@ -48,39 +43,41 @@ export class DemoApp {
4843
dark = false;
4944
navItems = [
5045
{name: 'Autocomplete', route: '/autocomplete'},
51-
{name: 'Button', route: '/button'},
5246
{name: 'Button Toggle', route: '/button-toggle'},
47+
{name: 'Button', route: '/button'},
5348
{name: 'Card', route: '/card'},
54-
{name: 'Chips', route: '/chips'},
5549
{name: 'Checkbox', route: '/checkbox'},
50+
{name: 'Chips', route: '/chips'},
5651
{name: 'Datepicker', route: '/datepicker'},
5752
{name: 'Dialog', route: '/dialog'},
53+
{name: 'Drawer', route: '/drawer'},
5854
{name: 'Expansion Panel', route: '/expansion'},
55+
{name: 'Focus Origin', route: '/focus-origin'},
5956
{name: 'Gestures', route: '/gestures'},
6057
{name: 'Grid List', route: '/grid-list'},
6158
{name: 'Icon', route: '/icon'},
6259
{name: 'Input', route: '/input'},
6360
{name: 'List', route: '/list'},
64-
{name: 'Menu', route: '/menu'},
6561
{name: 'Live Announcer', route: '/live-announcer'},
62+
{name: 'Menu', route: '/menu'},
6663
{name: 'Overlay', route: '/overlay'},
64+
{name: 'Platform', route: '/platform'},
6765
{name: 'Portal', route: '/portal'},
6866
{name: 'Progress Bar', route: '/progress-bar'},
6967
{name: 'Progress Spinner', route: '/progress-spinner'},
7068
{name: 'Radio', route: '/radio'},
7169
{name: 'Ripple', route: '/ripple'},
7270
{name: 'Select', route: '/select'},
7371
{name: 'Sidenav', route: '/sidenav'},
74-
{name: 'Slider', route: '/slider'},
7572
{name: 'Slide Toggle', route: '/slide-toggle'},
73+
{name: 'Slider', route: '/slider'},
7674
{name: 'Snack Bar', route: '/snack-bar'},
7775
{name: 'Stepper', route: '/stepper'},
76+
{name: 'Style', route: '/style'},
7877
{name: 'Table', route: '/table'},
7978
{name: 'Tabs', route: '/tabs'},
8079
{name: 'Toolbar', route: '/toolbar'},
8180
{name: 'Tooltip', route: '/tooltip'},
82-
{name: 'Platform', route: '/platform'},
83-
{name: 'Focus Origin', route: '/focus-origin'},
8481
{name: 'Typography', route: '/typography'}
8582
];
8683

‎src/demo-app/demo-app/demo-module.ts‎

Lines changed: 49 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,50 @@
1-
import {NgModule} from '@angular/core';
1+
import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
22
import {CommonModule} from '@angular/common';
3+
import {NgModule} from '@angular/core';
34
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
45
import {RouterModule} from '@angular/router';
5-
import {DemoApp, Home} from './demo-app';
6-
import {DEMO_APP_ROUTES} from './routes';
7-
import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
8-
import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
9-
import {RippleDemo} from '../ripple/ripple-demo';
10-
import {IconDemo} from '../icon/icon-demo';
11-
import {GesturesDemo} from '../gestures/gestures-demo';
6+
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
7+
import {BaselineDemo} from '../baseline/baseline-demo';
8+
import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
9+
import {ButtonDemo} from '../button/button-demo';
1210
import {CardDemo} from '../card/card-demo';
11+
import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
1312
import {ChipsDemo} from '../chips/chips-demo';
14-
import {RadioDemo} from '../radio/radio-demo';
15-
import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
16-
import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
17-
import {TooltipDemo} from '../tooltip/tooltip-demo';
18-
import {ListDemo} from '../list/list-demo';
19-
import {BaselineDemo} from '../baseline/baseline-demo';
13+
import {DatepickerDemo} from '../datepicker/datepicker-demo';
14+
import {DemoMaterialModule} from '../demo-material-module';
15+
import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
16+
import {DrawerDemo} from '../drawer/drawer-demo';
17+
import {ExpansionDemo} from '../expansion/expansion-demo';
18+
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
19+
import {GesturesDemo} from '../gestures/gestures-demo';
2020
import {GridListDemo} from '../grid-list/grid-list-demo';
21+
import {IconDemo} from '../icon/icon-demo';
22+
import {InputDemo} from '../input/input-demo';
23+
import {ListDemo} from '../list/list-demo';
2124
import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
25+
import {MenuDemo} from '../menu/menu-demo';
2226
import {OverlayDemo, RotiniPanel, SpagettiPanel} from '../overlay/overlay-demo';
23-
import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
24-
import {ToolbarDemo} from '../toolbar/toolbar-demo';
25-
import {ButtonDemo} from '../button/button-demo';
26-
import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
27+
import {PlatformDemo} from '../platform/platform-demo';
28+
import {PortalDemo, ScienceJoke} from '../portal/portal-demo';
29+
import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
30+
import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
31+
import {RadioDemo} from '../radio/radio-demo';
32+
import {RippleDemo} from '../ripple/ripple-demo';
2733
import {SelectDemo} from '../select/select-demo';
28-
import {SliderDemo} from '../slider/slider-demo';
2934
import {SidenavDemo} from '../sidenav/sidenav-demo';
35+
import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
36+
import {SliderDemo} from '../slider/slider-demo';
3037
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
31-
import {PortalDemo, ScienceJoke} from '../portal/portal-demo';
32-
import {MenuDemo} from '../menu/menu-demo';
33-
import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../tabs/tabs-demo';
34-
import {PlatformDemo} from '../platform/platform-demo';
35-
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
36-
import {InputDemo} from '../input/input-demo';
37-
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
38-
import {TableDemo} from '../table/table-demo';
39-
import {PeopleDatabase} from '../table/people-database';
40-
import {DatepickerDemo} from '../datepicker/datepicker-demo';
41-
import {TypographyDemo} from '../typography/typography-demo';
42-
import {ExpansionDemo} from '../expansion/expansion-demo';
4338
import {StepperDemo} from '../stepper/stepper-demo';
44-
import {DemoMaterialModule} from '../demo-material-module';
45-
import {
46-
FullscreenOverlayContainer,
47-
OverlayContainer,
48-
} from '@angular/cdk/overlay';
39+
import {PeopleDatabase} from '../table/people-database';
40+
import {TableDemo} from '../table/table-demo';
4941
import {TableHeaderDemo} from '../table/table-header-demo';
42+
import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../tabs/tabs-demo';
43+
import {ToolbarDemo} from '../toolbar/toolbar-demo';
44+
import {TooltipDemo} from '../tooltip/tooltip-demo';
45+
import {TypographyDemo} from '../typography/typography-demo';
46+
import {DemoApp, Home} from './demo-app';
47+
import {DEMO_APP_ROUTES} from './routes';
5048

5149
@NgModule({
5250
imports: [
@@ -62,60 +60,61 @@ import {TableHeaderDemo} from '../table/table-header-demo';
6260
ButtonDemo,
6361
ButtonToggleDemo,
6462
CardDemo,
65-
ChipsDemo,
6663
CheckboxDemo,
64+
ChipsDemo,
65+
ContentElementDialog,
6766
DatepickerDemo,
6867
DemoApp,
6968
DialogDemo,
69+
DrawerDemo,
70+
ExpansionDemo,
71+
FocusOriginDemo,
72+
FoggyTabContent,
7073
GesturesDemo,
7174
GridListDemo,
7275
Home,
7376
IconDemo,
77+
IFrameDialog,
7478
InputDemo,
7579
JazzDialog,
76-
ContentElementDialog,
77-
IFrameDialog,
7880
ListDemo,
7981
LiveAnnouncerDemo,
8082
MdCheckboxDemoNestedChecklist,
8183
MenuDemo,
82-
SnackBarDemo,
8384
OverlayDemo,
85+
PlatformDemo,
8486
PortalDemo,
8587
ProgressBarDemo,
8688
ProgressSpinnerDemo,
8789
RadioDemo,
90+
RainyTabContent,
8891
RippleDemo,
8992
RotiniPanel,
9093
ScienceJoke,
9194
SelectDemo,
9295
SidenavDemo,
9396
SliderDemo,
9497
SlideToggleDemo,
98+
SnackBarDemo,
9599
SpagettiPanel,
96100
StepperDemo,
97-
FocusOriginDemo,
101+
SunnyTabContent,
102+
TableDemo,
98103
TableHeaderDemo,
104+
TabsDemo,
99105
ToolbarDemo,
100106
TooltipDemo,
101-
TableDemo,
102-
TabsDemo,
103-
SunnyTabContent,
104-
RainyTabContent,
105-
FoggyTabContent,
106-
PlatformDemo,
107107
TypographyDemo,
108-
ExpansionDemo,
109108
],
110109
providers: [
111110
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},
112111
PeopleDatabase
113112
],
114113
entryComponents: [
115-
DemoApp,
116-
JazzDialog,
117114
ContentElementDialog,
115+
DemoApp,
118116
IFrameDialog,
117+
JazzDialog,
119118
RotiniPanel,
120119
ScienceJoke,
121120
SpagettiPanel,

‎src/demo-app/demo-app/routes.ts‎

Lines changed: 50 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,86 @@
11
import {Routes} from '@angular/router';
2-
import {Home} from './demo-app';
3-
import {ButtonDemo} from '../button/button-demo';
2+
import {AccessibilityDemo} from '../a11y/a11y';
3+
import {ACCESSIBILITY_DEMO_ROUTES} from '../a11y/routes';
4+
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
45
import {BaselineDemo} from '../baseline/baseline-demo';
56
import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
6-
import {TabsDemo} from '../tabs/tabs-demo';
7-
import {GridListDemo} from '../grid-list/grid-list-demo';
7+
import {ButtonDemo} from '../button/button-demo';
8+
import {CardDemo} from '../card/card-demo';
9+
import {CheckboxDemo} from '../checkbox/checkbox-demo';
10+
import {ChipsDemo} from '../chips/chips-demo';
11+
import {DatepickerDemo} from '../datepicker/datepicker-demo';
12+
import {DialogDemo} from '../dialog/dialog-demo';
13+
import {DrawerDemo} from '../drawer/drawer-demo';
14+
import {ExpansionDemo} from '../expansion/expansion-demo';
15+
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
816
import {GesturesDemo} from '../gestures/gestures-demo';
9-
import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
10-
import {ListDemo} from '../list/list-demo';
17+
import {GridListDemo} from '../grid-list/grid-list-demo';
1118
import {IconDemo} from '../icon/icon-demo';
12-
import {ToolbarDemo} from '../toolbar/toolbar-demo';
13-
import {CheckboxDemo} from '../checkbox/checkbox-demo';
19+
import {InputDemo} from '../input/input-demo';
20+
import {ListDemo} from '../list/list-demo';
21+
import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
22+
import {MenuDemo} from '../menu/menu-demo';
1423
import {OverlayDemo} from '../overlay/overlay-demo';
24+
import {PlatformDemo} from '../platform/platform-demo';
1525
import {PortalDemo} from '../portal/portal-demo';
1626
import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
1727
import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
28+
import {RadioDemo} from '../radio/radio-demo';
29+
import {RippleDemo} from '../ripple/ripple-demo';
1830
import {SelectDemo} from '../select/select-demo';
1931
import {SidenavDemo} from '../sidenav/sidenav-demo';
2032
import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
2133
import {SliderDemo} from '../slider/slider-demo';
22-
import {RadioDemo} from '../radio/radio-demo';
23-
import {CardDemo} from '../card/card-demo';
24-
import {ChipsDemo} from '../chips/chips-demo';
25-
import {MenuDemo} from '../menu/menu-demo';
26-
import {RippleDemo} from '../ripple/ripple-demo';
27-
import {DialogDemo} from '../dialog/dialog-demo';
28-
import {TooltipDemo} from '../tooltip/tooltip-demo';
2934
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
30-
import {TABS_DEMO_ROUTES} from '../tabs/routes';
31-
import {PlatformDemo} from '../platform/platform-demo';
32-
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
33-
import {InputDemo} from '../input/input-demo';
34-
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
35-
import {DatepickerDemo} from '../datepicker/datepicker-demo';
35+
import {StepperDemo} from '../stepper/stepper-demo';
3636
import {TableDemo} from '../table/table-demo';
37+
import {TABS_DEMO_ROUTES} from '../tabs/routes';
38+
import {TabsDemo} from '../tabs/tabs-demo';
39+
import {ToolbarDemo} from '../toolbar/toolbar-demo';
40+
import {TooltipDemo} from '../tooltip/tooltip-demo';
3741
import {TypographyDemo} from '../typography/typography-demo';
38-
import {ExpansionDemo} from '../expansion/expansion-demo';
39-
import {StepperDemo} from '../stepper/stepper-demo';
40-
import {DemoApp} from './demo-app';
41-
import {AccessibilityDemo} from '../a11y/a11y';
42-
import {ACCESSIBILITY_DEMO_ROUTES} from '../a11y/routes';
42+
import {DemoApp, Home} from './demo-app';
4343

4444
export const DEMO_APP_ROUTES: Routes = [
4545
{path: '', component: DemoApp, children: [
4646
{path: '', component: Home},
4747
{path: 'autocomplete', component: AutocompleteDemo},
48+
{path: 'baseline', component: BaselineDemo},
4849
{path: 'button', component: ButtonDemo},
50+
{path: 'button-toggle', component: ButtonToggleDemo},
4951
{path: 'card', component: CardDemo},
52+
{path: 'checkbox', component: CheckboxDemo},
5053
{path: 'chips', component: ChipsDemo},
51-
{path: 'table', component: TableDemo},
5254
{path: 'datepicker', component: DatepickerDemo},
55+
{path: 'dialog', component: DialogDemo},
56+
{path: 'drawer', component: DrawerDemo},
57+
{path: 'expansion', component: ExpansionDemo},
58+
{path: 'focus-origin', component: FocusOriginDemo},
59+
{path: 'gestures', component: GesturesDemo},
60+
{path: 'grid-list', component: GridListDemo},
61+
{path: 'icon', component: IconDemo},
62+
{path: 'input', component: InputDemo},
63+
{path: 'list', component: ListDemo},
64+
{path: 'live-announcer', component: LiveAnnouncerDemo},
65+
{path: 'menu', component: MenuDemo},
66+
{path: 'overlay', component: OverlayDemo},
67+
{path: 'platform', component: PlatformDemo},
68+
{path: 'portal', component: PortalDemo},
69+
{path: 'progress-bar', component: ProgressBarDemo},
70+
{path: 'progress-spinner', component: ProgressSpinnerDemo},
5371
{path: 'radio', component: RadioDemo},
72+
{path: 'ripple', component: RippleDemo},
5473
{path: 'select', component: SelectDemo},
5574
{path: 'sidenav', component: SidenavDemo},
5675
{path: 'slide-toggle', component: SlideToggleDemo},
5776
{path: 'slider', component: SliderDemo},
58-
{path: 'progress-spinner', component: ProgressSpinnerDemo},
59-
{path: 'progress-bar', component: ProgressBarDemo},
60-
{path: 'portal', component: PortalDemo},
61-
{path: 'overlay', component: OverlayDemo},
62-
{path: 'checkbox', component: CheckboxDemo},
63-
{path: 'input', component: InputDemo},
64-
{path: 'toolbar', component: ToolbarDemo},
65-
{path: 'icon', component: IconDemo},
66-
{path: 'list', component: ListDemo},
67-
{path: 'menu', component: MenuDemo},
68-
{path: 'live-announcer', component: LiveAnnouncerDemo},
69-
{path: 'gestures', component: GesturesDemo},
70-
{path: 'grid-list', component: GridListDemo},
77+
{path: 'snack-bar', component: SnackBarDemo},
78+
{path: 'stepper', component: StepperDemo},
79+
{path: 'table', component: TableDemo},
7180
{path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
72-
{path: 'button-toggle', component: ButtonToggleDemo},
73-
{path: 'baseline', component: BaselineDemo},
74-
{path: 'ripple', component: RippleDemo},
75-
{path: 'dialog', component: DialogDemo},
81+
{path: 'toolbar', component: ToolbarDemo},
7682
{path: 'tooltip', component: TooltipDemo},
77-
{path: 'snack-bar', component: SnackBarDemo},
78-
{path: 'platform', component: PlatformDemo},
79-
{path: 'focus-origin', component: FocusOriginDemo},
8083
{path: 'typography', component: TypographyDemo},
81-
{path: 'expansion', component: ExpansionDemo},
82-
{path: 'stepper', component: StepperDemo}
8384
]}
8485
];
8586

0 commit comments

Comments
 (0)