import 'package:polymer_app_layout_template/app_layout.dart'';

// route
@property
List<AppPage> get pages => [
    new AppPage("Home", "home", "home-page", isDefault: true),
    new AppPage("One", "one", "page-one"),
    new AppPage("Two", "two", "page-two", menu: false, hideLeftNav: true)
];

<layout-app 
    pages="{{pages}}" 
    layout-type="layout-nav-view">
</layout-app>

gotToHome() {
    LayoutApp.goToDefaultRoute();
}

gotToPage(String pageName) {
    LayoutApp.goToRouteName(pageName);
}

@Listen(LayoutApp.page_changed_event)
pageChanged(CustomEventWrapper e, [_]) {
    print("page changed => ${(e.detail as AppPage)}");
}

@Listen(LayoutApp.path_changed_event)
pathChanged(CustomEventWrapper e, [_]) {
    print("path changed => ${e.detail}");
}

// toolbar
@property
List get toolbarItems => [
    'toolbar-more-button' // or document.createElement('toolbar-more-button');
];

// header
@property
HtmlElement get header => document.createElement("nav-header");

//footer
@property
String get footer => "nav-footer"
   

<layout-app 
    pages="{{pages}}" 
    toolbar-items="{{toolbarItems}}" 
    layout-type="layout-nav-header" 
    nav-header="{{header}}" 
    nav-footer="{{footer}}">
</layout-app>