Polymer closing the drawer panel

How do I close the drawer panel when I click a paper item. I do not seem to understand the documentation or other similar questions.

<paper-drawer-panel responsive-width="800px">
    <paper-header-panel drawer id="drawer">
        <div class="horizontal-section-container">
            <div class="horizontal-section">
                <paper-menu>
                    <paper-icon-item onclick="closeDrawer()" id="icon">
                        <iron-icon icon="favorite" item-icon></iron-icon>
                        Favorite
                    </paper-icon-item>

                    <paper-item>Inbox</paper-item>
                    <paper-item>Starred</paper-item>
                    <paper-item>Sent mail</paper-item>
                    <paper-item>Drafts</paper-item>
                </paper-menu>
            </div>
        </div>
    <!--<ul>
        <li><paper-ripple></paper-ripple>One</li>
        <li><paper-ripple></paper-ripple>Two</li>
        <li><paper-ripple></paper-ripple>Three</li>
    </ul>-->

    </paper-header-panel>
<!-- <paper-header-panel main>
        <paper-toolbar>
            <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
            <div class="title">Title</div>
        </paper-toolbar> 
        <div>

        </div>
    </paper-header-panel>
-->

I am using polymer with meteor 1.2.1. Can anyone please help me out?

Solution

On your paper-icon-item (why not use paper-icon-button here?) Add the attribute paper-drawer-toggle.

So you code will look like:

Favorite

The docs for the paper-drawer-element state:

An element that should toggle the drawer will automatically do so if it's given the paper-drawer-toggle attribute. Also this element will automatically be hidden in wide layout.