Custom item collapsing toolbar doesn't work as desired

I'm trying to get around with Polymer version 1.0, but what I thought would be a simple example turns out to be wrong. After a few hours of experimenting and reading the Polymer documentation, I don't mean I am wrong.

What I was trying to do was convert the sample Collapsing toolbar from robdobson on GitHub to something that would work under Polynmer 1.0.

Here is the body of my code from 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 for my element file (collapse-toolbar.html):

    <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 see when I run this in a browser (Chrome) is this: If I open the index.html file with my browser window set to width> 500px then I see a Polyer icon and a paper menu which is exactly what I am waiting.

If I reduce the browser window width to <500px, the paper menu disappears and a hamburger menu appears next to the polymer symbol. If I click on the hamburger menu, the NO drop-down menu appears .

If I now scale the window to> 500px, the hamburger menu disappears, but my normal paper menu doesn't come back.

If I start loading a page with a window of <500px the hamburger menu appears but doesn't work and when I expand the window to> 500px the paper menu also doesn't show.

Hoping that someone can put me on the right track.