Skip to content

Commit

Permalink
feat(sidenav): Add support for fixed sidenavs (#6712)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmalerba @jelbourn
mmalerba authored and jelbourn committed Sep 21, 2017
1 parent dbae360 commit 61579bc
Show file tree
Hide file tree
Showing 19 changed files with 592 additions and 261 deletions.
21 changes: 9 additions & 12 deletions src/demo-app/demo-app/demo-app.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import {
Component,
ViewEncapsulation,
ElementRef,
Renderer2,
} from '@angular/core';
import {OverlayContainer} from '@angular/cdk/overlay';
import {Component, ElementRef, Renderer2, ViewEncapsulation} from '@angular/core';

/**
* The entry app for demo site. Routes under `accessibility` will use AccessibilityDemo component,
Expand Down Expand Up @@ -48,39 +43,41 @@ export class DemoApp {
dark = false;
navItems = [
{name: 'Autocomplete', route: '/autocomplete'},
{name: 'Button', route: '/button'},
{name: 'Button Toggle', route: '/button-toggle'},
{name: 'Button', route: '/button'},
{name: 'Card', route: '/card'},
{name: 'Chips', route: '/chips'},
{name: 'Checkbox', route: '/checkbox'},
{name: 'Chips', route: '/chips'},
{name: 'Datepicker', route: '/datepicker'},
{name: 'Dialog', route: '/dialog'},
{name: 'Drawer', route: '/drawer'},
{name: 'Expansion Panel', route: '/expansion'},
{name: 'Focus Origin', route: '/focus-origin'},
{name: 'Gestures', route: '/gestures'},
{name: 'Grid List', route: '/grid-list'},
{name: 'Icon', route: '/icon'},
{name: 'Input', route: '/input'},
{name: 'List', route: '/list'},
{name: 'Menu', route: '/menu'},
{name: 'Live Announcer', route: '/live-announcer'},
{name: 'Menu', route: '/menu'},
{name: 'Overlay', route: '/overlay'},
{name: 'Platform', route: '/platform'},
{name: 'Portal', route: '/portal'},
{name: 'Progress Bar', route: '/progress-bar'},
{name: 'Progress Spinner', route: '/progress-spinner'},
{name: 'Radio', route: '/radio'},
{name: 'Ripple', route: '/ripple'},
{name: 'Select', route: '/select'},
{name: 'Sidenav', route: '/sidenav'},
{name: 'Slider', route: '/slider'},
{name: 'Slide Toggle', route: '/slide-toggle'},
{name: 'Slider', route: '/slider'},
{name: 'Snack Bar', route: '/snack-bar'},
{name: 'Stepper', route: '/stepper'},
{name: 'Style', route: '/style'},
{name: 'Table', route: '/table'},
{name: 'Tabs', route: '/tabs'},
{name: 'Toolbar', route: '/toolbar'},
{name: 'Tooltip', route: '/tooltip'},
{name: 'Platform', route: '/platform'},
{name: 'Focus Origin', route: '/focus-origin'},
{name: 'Typography', route: '/typography'}
];

Expand Down
99 changes: 49 additions & 50 deletions src/demo-app/demo-app/demo-module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,50 @@
import {NgModule} from '@angular/core';
import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {DemoApp, Home} from './demo-app';
import {DEMO_APP_ROUTES} from './routes';
import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
import {RippleDemo} from '../ripple/ripple-demo';
import {IconDemo} from '../icon/icon-demo';
import {GesturesDemo} from '../gestures/gestures-demo';
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
import {BaselineDemo} from '../baseline/baseline-demo';
import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
import {ButtonDemo} from '../button/button-demo';
import {CardDemo} from '../card/card-demo';
import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
import {ChipsDemo} from '../chips/chips-demo';
import {RadioDemo} from '../radio/radio-demo';
import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
import {TooltipDemo} from '../tooltip/tooltip-demo';
import {ListDemo} from '../list/list-demo';
import {BaselineDemo} from '../baseline/baseline-demo';
import {DatepickerDemo} from '../datepicker/datepicker-demo';
import {DemoMaterialModule} from '../demo-material-module';
import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
import {DrawerDemo} from '../drawer/drawer-demo';
import {ExpansionDemo} from '../expansion/expansion-demo';
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
import {GesturesDemo} from '../gestures/gestures-demo';
import {GridListDemo} from '../grid-list/grid-list-demo';
import {IconDemo} from '../icon/icon-demo';
import {InputDemo} from '../input/input-demo';
import {ListDemo} from '../list/list-demo';
import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
import {MenuDemo} from '../menu/menu-demo';
import {OverlayDemo, RotiniPanel, SpagettiPanel} from '../overlay/overlay-demo';
import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
import {ToolbarDemo} from '../toolbar/toolbar-demo';
import {ButtonDemo} from '../button/button-demo';
import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
import {PlatformDemo} from '../platform/platform-demo';
import {PortalDemo, ScienceJoke} from '../portal/portal-demo';
import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
import {RadioDemo} from '../radio/radio-demo';
import {RippleDemo} from '../ripple/ripple-demo';
import {SelectDemo} from '../select/select-demo';
import {SliderDemo} from '../slider/slider-demo';
import {SidenavDemo} from '../sidenav/sidenav-demo';
import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
import {SliderDemo} from '../slider/slider-demo';
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
import {PortalDemo, ScienceJoke} from '../portal/portal-demo';
import {MenuDemo} from '../menu/menu-demo';
import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../tabs/tabs-demo';
import {PlatformDemo} from '../platform/platform-demo';
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
import {InputDemo} from '../input/input-demo';
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
import {TableDemo} from '../table/table-demo';
import {PeopleDatabase} from '../table/people-database';
import {DatepickerDemo} from '../datepicker/datepicker-demo';
import {TypographyDemo} from '../typography/typography-demo';
import {ExpansionDemo} from '../expansion/expansion-demo';
import {StepperDemo} from '../stepper/stepper-demo';
import {DemoMaterialModule} from '../demo-material-module';
import {
FullscreenOverlayContainer,
OverlayContainer,
} from '@angular/cdk/overlay';
import {PeopleDatabase} from '../table/people-database';
import {TableDemo} from '../table/table-demo';
import {TableHeaderDemo} from '../table/table-header-demo';
import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../tabs/tabs-demo';
import {ToolbarDemo} from '../toolbar/toolbar-demo';
import {TooltipDemo} from '../tooltip/tooltip-demo';
import {TypographyDemo} from '../typography/typography-demo';
import {DemoApp, Home} from './demo-app';
import {DEMO_APP_ROUTES} from './routes';

@NgModule({
imports: [
Expand All @@ -62,60 +60,61 @@ import {TableHeaderDemo} from '../table/table-header-demo';
ButtonDemo,
ButtonToggleDemo,
CardDemo,
ChipsDemo,
CheckboxDemo,
ChipsDemo,
ContentElementDialog,
DatepickerDemo,
DemoApp,
DialogDemo,
DrawerDemo,
ExpansionDemo,
FocusOriginDemo,
FoggyTabContent,
GesturesDemo,
GridListDemo,
Home,
IconDemo,
IFrameDialog,
InputDemo,
JazzDialog,
ContentElementDialog,
IFrameDialog,
ListDemo,
LiveAnnouncerDemo,
MdCheckboxDemoNestedChecklist,
MenuDemo,
SnackBarDemo,
OverlayDemo,
PlatformDemo,
PortalDemo,
ProgressBarDemo,
ProgressSpinnerDemo,
RadioDemo,
RainyTabContent,
RippleDemo,
RotiniPanel,
ScienceJoke,
SelectDemo,
SidenavDemo,
SliderDemo,
SlideToggleDemo,
SnackBarDemo,
SpagettiPanel,
StepperDemo,
FocusOriginDemo,
SunnyTabContent,
TableDemo,
TableHeaderDemo,
TabsDemo,
ToolbarDemo,
TooltipDemo,
TableDemo,
TabsDemo,
SunnyTabContent,
RainyTabContent,
FoggyTabContent,
PlatformDemo,
TypographyDemo,
ExpansionDemo,
],
providers: [
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},
PeopleDatabase
],
entryComponents: [
DemoApp,
JazzDialog,
ContentElementDialog,
DemoApp,
IFrameDialog,
JazzDialog,
RotiniPanel,
ScienceJoke,
SpagettiPanel,
Expand Down
99 changes: 50 additions & 49 deletions src/demo-app/demo-app/routes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,86 @@
import {Routes} from '@angular/router';
import {Home} from './demo-app';
import {ButtonDemo} from '../button/button-demo';
import {AccessibilityDemo} from '../a11y/a11y';
import {ACCESSIBILITY_DEMO_ROUTES} from '../a11y/routes';
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
import {BaselineDemo} from '../baseline/baseline-demo';
import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
import {TabsDemo} from '../tabs/tabs-demo';
import {GridListDemo} from '../grid-list/grid-list-demo';
import {ButtonDemo} from '../button/button-demo';
import {CardDemo} from '../card/card-demo';
import {CheckboxDemo} from '../checkbox/checkbox-demo';
import {ChipsDemo} from '../chips/chips-demo';
import {DatepickerDemo} from '../datepicker/datepicker-demo';
import {DialogDemo} from '../dialog/dialog-demo';
import {DrawerDemo} from '../drawer/drawer-demo';
import {ExpansionDemo} from '../expansion/expansion-demo';
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
import {GesturesDemo} from '../gestures/gestures-demo';
import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
import {ListDemo} from '../list/list-demo';
import {GridListDemo} from '../grid-list/grid-list-demo';
import {IconDemo} from '../icon/icon-demo';
import {ToolbarDemo} from '../toolbar/toolbar-demo';
import {CheckboxDemo} from '../checkbox/checkbox-demo';
import {InputDemo} from '../input/input-demo';
import {ListDemo} from '../list/list-demo';
import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
import {MenuDemo} from '../menu/menu-demo';
import {OverlayDemo} from '../overlay/overlay-demo';
import {PlatformDemo} from '../platform/platform-demo';
import {PortalDemo} from '../portal/portal-demo';
import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
import {RadioDemo} from '../radio/radio-demo';
import {RippleDemo} from '../ripple/ripple-demo';
import {SelectDemo} from '../select/select-demo';
import {SidenavDemo} from '../sidenav/sidenav-demo';
import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
import {SliderDemo} from '../slider/slider-demo';
import {RadioDemo} from '../radio/radio-demo';
import {CardDemo} from '../card/card-demo';
import {ChipsDemo} from '../chips/chips-demo';
import {MenuDemo} from '../menu/menu-demo';
import {RippleDemo} from '../ripple/ripple-demo';
import {DialogDemo} from '../dialog/dialog-demo';
import {TooltipDemo} from '../tooltip/tooltip-demo';
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
import {TABS_DEMO_ROUTES} from '../tabs/routes';
import {PlatformDemo} from '../platform/platform-demo';
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
import {InputDemo} from '../input/input-demo';
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
import {DatepickerDemo} from '../datepicker/datepicker-demo';
import {StepperDemo} from '../stepper/stepper-demo';
import {TableDemo} from '../table/table-demo';
import {TABS_DEMO_ROUTES} from '../tabs/routes';
import {TabsDemo} from '../tabs/tabs-demo';
import {ToolbarDemo} from '../toolbar/toolbar-demo';
import {TooltipDemo} from '../tooltip/tooltip-demo';
import {TypographyDemo} from '../typography/typography-demo';
import {ExpansionDemo} from '../expansion/expansion-demo';
import {StepperDemo} from '../stepper/stepper-demo';
import {DemoApp} from './demo-app';
import {AccessibilityDemo} from '../a11y/a11y';
import {ACCESSIBILITY_DEMO_ROUTES} from '../a11y/routes';
import {DemoApp, Home} from './demo-app';

export const DEMO_APP_ROUTES: Routes = [
{path: '', component: DemoApp, children: [
{path: '', component: Home},
{path: 'autocomplete', component: AutocompleteDemo},
{path: 'baseline', component: BaselineDemo},
{path: 'button', component: ButtonDemo},
{path: 'button-toggle', component: ButtonToggleDemo},
{path: 'card', component: CardDemo},
{path: 'checkbox', component: CheckboxDemo},
{path: 'chips', component: ChipsDemo},
{path: 'table', component: TableDemo},
{path: 'datepicker', component: DatepickerDemo},
{path: 'dialog', component: DialogDemo},
{path: 'drawer', component: DrawerDemo},
{path: 'expansion', component: ExpansionDemo},
{path: 'focus-origin', component: FocusOriginDemo},
{path: 'gestures', component: GesturesDemo},
{path: 'grid-list', component: GridListDemo},
{path: 'icon', component: IconDemo},
{path: 'input', component: InputDemo},
{path: 'list', component: ListDemo},
{path: 'live-announcer', component: LiveAnnouncerDemo},
{path: 'menu', component: MenuDemo},
{path: 'overlay', component: OverlayDemo},
{path: 'platform', component: PlatformDemo},
{path: 'portal', component: PortalDemo},
{path: 'progress-bar', component: ProgressBarDemo},
{path: 'progress-spinner', component: ProgressSpinnerDemo},
{path: 'radio', component: RadioDemo},
{path: 'ripple', component: RippleDemo},
{path: 'select', component: SelectDemo},
{path: 'sidenav', component: SidenavDemo},
{path: 'slide-toggle', component: SlideToggleDemo},
{path: 'slider', component: SliderDemo},
{path: 'progress-spinner', component: ProgressSpinnerDemo},
{path: 'progress-bar', component: ProgressBarDemo},
{path: 'portal', component: PortalDemo},
{path: 'overlay', component: OverlayDemo},
{path: 'checkbox', component: CheckboxDemo},
{path: 'input', component: InputDemo},
{path: 'toolbar', component: ToolbarDemo},
{path: 'icon', component: IconDemo},
{path: 'list', component: ListDemo},
{path: 'menu', component: MenuDemo},
{path: 'live-announcer', component: LiveAnnouncerDemo},
{path: 'gestures', component: GesturesDemo},
{path: 'grid-list', component: GridListDemo},
{path: 'snack-bar', component: SnackBarDemo},
{path: 'stepper', component: StepperDemo},
{path: 'table', component: TableDemo},
{path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
{path: 'button-toggle', component: ButtonToggleDemo},
{path: 'baseline', component: BaselineDemo},
{path: 'ripple', component: RippleDemo},
{path: 'dialog', component: DialogDemo},
{path: 'toolbar', component: ToolbarDemo},
{path: 'tooltip', component: TooltipDemo},
{path: 'snack-bar', component: SnackBarDemo},
{path: 'platform', component: PlatformDemo},
{path: 'focus-origin', component: FocusOriginDemo},
{path: 'typography', component: TypographyDemo},
{path: 'expansion', component: ExpansionDemo},
{path: 'stepper', component: StepperDemo}
]}
];

Expand Down
Loading

0 comments on commit 61579bc

Please sign in to comment.