Polymer Page with different app-header on home page

Question

i'm trying to make difference between home page and other page in polymer 2.0

1. Home page = With big header and condensed
2. Other Page = just as usual app-header with small header on the top

what i try to do is using dom-if, i create dom-if with 2 kind of app-header

_isHome(page) {
  return page === "view1";
}

app-header#homeHeader {
  color: #fff;
  height: 500px;
  --app-header-background-front-layer: {
    background-image: url(../images/Digital-Signage-Slider3a.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  ;
}

app-header#defaultHeader {
  color: #fff;
  background-color: var(--app-primary-color);
}

<app-header-layout>
  <template is="dom-if" if="[[_isHome(page)]]">
    <app-header id="homeHeader" slot="header" condenses reveals effects="parallax-background" style="height: 500px">
      <app-toolbar>
        <div main-title>My App</div>
        <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
      </app-toolbar>
    </app-header>
  </template>

  <template is="dom-if" if="[[!_isHome(page)]]">
    <app-header id="defaultHeader" slot="header" condenses reveals effects="material">
      <app-toolbar>
        <div main-title>My App</div>
          <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
      </app-toolbar>
    </app-header>
  </template>

  <iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404" role="main">
    <my-view1 name="view1"></my-view1>
    <my-view2 name="view2"></my-view2>
    <my-view3 name="view3"></my-view3>
    <my-view404 name="view404"></my-view404>
  </iron-pages>
</app-header-layout>

and guess what? it worked, but with some space after it, but the space is gone after refreshed hmm..

Home Page with large image condensed header

After click on the 2nd page

After refreshed

any idea?

Answer 1

Revised Solution

I had another go at this because on an app I started yesterday. I think I've a simplier solution, with only one app-header and one app-toolbar.

First I replace the app-header#... styles with these:

.main-title {
  color: #fff;
  height: 500px;
  --app-header-background-front-layer: {
    background-image: url(../images/Digital-Signage-Slider3a.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  ;
}

.condensed-title {
  color: #fff;
  background-color: var(--app-primary-color);
}

The header and toolbar are now

<app-header-layout id="header" has-scrolling-region>

  <app-header class$=[[_getHeaderClass(page)]] slot="header" fixed effects="waterfall">

    <app-toolbar>
      <template is="dom-if" if=[[_isHome(page)]]>
        <div main-title>My App 1</div>
      </template>
      <template is="dom-if" if=[[!_isHome(page)]]>
        <div condensed-title>My App 2 & 3</div>
      </template>
      <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
    </app-toolbar>

  </app-header>
  ...

The function called to set app-header's class is

_getHeaderClass(page) {
  return (page === "view1") ? 'main-title' : 'condensed-title';
}

Note that you must still call this.$.header.notifyResize() in _routePageChanged(page).

I've put up a gist of the complete file at my-app-revised.html.

----- former solution -----

Call notifyResize() on the app-header-layout.

If you look at the polymer-starter-kit, give the app-header-layout an id, like id="header":

<app-header-layout id="header" has-scrolling-region>

Then call this.$.header.notifyResize() in _routePageChanged(page):

_routePageChanged(page) {
  // If no page was found in the route data, page will be an empty stri.
  // Default to 'view1' in that case.
  this.page = page || 'view1';
  this.$.header.notifyResize();

  // Close a non-persistent drawer when the page & route are changed.
  if (!this.$.drawer.persistent) {
    this.$.drawer.close();
  }
}