Different Toolbar for every page in core-scaffold

Question

I'm currently using core-scaffold for my basic app structure. However, i want to have a different toolbar for every page. I want to do something similar to this:

<core-scaffold>
        <core-header-panel navigation flex mode="seamed">
            <core-toolbar>
                Veganolux
            </core-toolbar>
            <core-menu>
                <paper-item icon="store" label="Restaurants" on-tap="{{showRestaurants}}"></paper-item>
                <paper-item icon="settings" label="Settings" on-tap="{{showSettings}}"></paper-item>
                <paper-item icon="info" label="About" on-click="{{showAbout}}"></paper-item>
            </core-menu>
        </core-header-panel>
        <div tool>Restaurants</div>
        <core-pages id="pages" selected="0">
            <section id="pageRestaurants">
                <div tool>Toolbar with buttons</div>
            </section>
            <section id="pageSettings">
                <div tool>Toolbar without buttons</div>
            </section>
            <section id="pageAbout">
                <div tool>Toolbar with other buttons</div>
            </section>
        </core-pages>
    </core-scaffold>

This is however not possible, because the is not a direct child of core-scaffold. I know that I could add databinding to change the title, but it gets to complex if I add different buttons/etc. to the toolbar.

Answer 1

One option is to create an activePage variable that holds the currently selected page. Your on-tap event handlers would update the activePage variable. Then you could wrap sections of the core-header-panel in conditional templates like <template if="{{ activePage === 'restaurants' }}">.

The other option is to create multiple layout elements and wrap the page element in a layout like this http://erikringsmuth.github.io/app-router/#/layouts.