How do I open app-drawer ONLY with icon menu in Polymer 1.6?

1
votes

This is my first taste of polymer, so am starting with Layout. I used the polymer-cli to start a app-drawer-template boilerplate, then am trying layout the header (which should include the navigation and search).

Currently the app-drawer shows by default.
How app-drawer currently shows

I wanted the app-drawer to only show(open/visible) when the menu icon is clicked in mobile(narrow) viewport size. How can I achieve this?

1
polymerpolymer-1.0
So you want to have a drawer that doesn't display on desktop viewport sizes and that opens with the icon button on mobile devices? – Alan Dávalos
Exactly, thats the behaviour I want. – odili
You might want to check the shop case study code, they use a drawer only for mobile devices and a tab-based navigation for desktops – Alan Dávalos

1 Answers

0
votes

You can check the <app-draw-layout>'s narrow property and hide the <app-drawer> accordingly.

<app-drawer-layout narrow$={{isNarrow}}>
    <app-drawer hidden$="[[!isNarrow]]">

...

properties: {
    isNarrow: Boolean
}

See https://www.polymer-project.org/1.0/toolbox/app-layout for more ideas.