polymerpolymer-1.0

Hide paper-header-panel by default

I'm playing around with Polymer project and want to create a layout similar to Google Play Music (https://play.google.com/music).

How can I hide the drawer by default and display the icon? Basically the small screen behavior of paper-drawer-panel should be forced. How can I create a app toolbar similar to Play Music?

<body unresolved class="fullbleed layout vertical">
    <span id="browser-sync-binding"></span>
    <template is="dom-bind" id="app">

        <paper-drawer-panel responsiveWidth="9999px">

            <paper-header-panel drawer>
                <paper-toolbar>
                    <div>Application</div>
                </paper-toolbar>
                <div>Drawer content...</div>
            </paper-header-panel>

            <paper-header-panel main>
                <paper-toolbar>
                    <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
                    <div>Title</div>
                </paper-toolbar>
                <div>Main content...</div>
            </paper-header-panel>

        </paper-drawer-panel>

    </template>
</body>
Solution

  • Erm... How about just force-narrow?

    <paper-header-panel force-narrow>
  ...
</paper-header-panel>

    as described in "paper-header-panel.html":

        /**
     * If true, ignore `responsiveWidth` setting and force the narrow layout.
     */
    forceNarrow: {
      type: Boolean,
      value: false
    },