Custom element, collapsing toolbar, not working as desired - polymer-1.0

Question

I'm trying to get to grips with Polymer version 1.0 but what I thought would be simple example is turning out not to be so. After after several hours of experimenting, and reading Polymer documentation I've not clue as to were I'm going wrong.
What I was trying to do is convert the Collapsing toolbar example from robdobson on GitHub to something that would work under Polynmer 1.0.
Here is the body of my code from within my index.html file
<collapse-toolbar query="(max-width: 500px)">
<div class="logo">
<a href="#">
<iron-icon icon="polymer"></iron-icon>
</a>
</div>
<paper-menu>
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</collapse-toolbar>
Here is the code from my custom element (collapse-toolbar.html) file:
<dom-module id="collapse-toolbar">
<template>
<content select=".logo"></content>
<template is="dom-if" if="{{smallScreen}}">
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<content select="paper-menu"></content>
</paper-menu-button>
</template>
<template is="dom-if" if="{{!smallScreen}}">
<content select="paper-menu"></content>
</template>
<iron-media-query query="{{query}}" query-matches="{{smallScreen}}"></iron-media-query>
</template>
</dom-module>
<script>
Polymer({
is: 'collapse-toolbar',
properties: {
query: String
}
});
</script>
What I'm seeing when I run this in a browser (Chrome) is the following:
If I open the index.html file with my browser window set to > 500px wide, what I see is the Polyer icon and the paper-menu, which is exactly what I expect.
If I reduce the width of the browser window to <500px, the paper-menu disappears and a hamburger menu appears along side the polymer icon. If I click on the hamburger menu, NO drop down menu appears.
If I now scale the window back to >500px, the hamburger menu disappears but my regular paper-menu does not come back.
If I load the page with the window at <500px to begin with, the hamburger menu appears, but does not operate and when I expand the window to > 500px the paper-menu also does NOT appear.
Hoping someone can put me on the right track.

Answer 1

Inside index.html, you should use <paper-menu class="dropdown-content"> to make the dropdown menu work.
I have still no idea how to replicate the functionality of the original collapse-toolbar in polymer 1.0.
UPDATE:
Use <template is="dom-if" if="{{!smallScreen}}" restamp="true"> to make the menu reappear after enlarging the window.