CODEWITHSUNDEEP
javascripthtmlpolymeraurelia
Anonymous Person
Anonymous Person

Reputation: 305

paper-drawer-toggle does not close menu after clicking

I am using polymer and aurelia and have a menu that opens from the side. But after I click on an item in the menu when in mobile, it does not close automatically.

<paper-item if.bind="!authenticated" class="login" style="padding-left:10px">
    <a paper-drawer-toggle href="/login" class="nav-link">
        <span class="fa fa-sign-in"></span>
        <span if.bind="fullmenu" class="nav-item">Login</span>
    </a>
</paper-item>

Upvotes: 1

Views: 158

Answers (2)

Joshua Sherman
Joshua Sherman

Reputation: 429

this was the full solution:

<paper-item if.bind="!authenticated" class="login" style="padding-left:10px">
   <a paper-drawer-toggle href="/login" class="nav-link" click.delegate="close()">
    <span class="fa fa-sign-in"></span>
    <span if.bind="fullmenu" class="nav-item">Login</span>
   </a>
</paper-item>

and then this is the JavaScript

close() {
    if (!this.widescreen) {
        let drawer = document.getElementById('drawerPanel');
        drawer.closeDrawer();
    }
}

This is the link to the Polymer doc we found the answer we needed https://www.webcomponents.org/element/PolymerElements/paper-drawer-panel/paper-drawer-panel#methods

Upvotes: 2

Tom
Tom

Reputation: 4292

I couldn't get paper-drawer-toggle to work, and had to create a function to handle it instead;

close() {
    let drawer = document.getElementById('drawerPanel');
    drawer.toggle();
    return true;
}

Then just add the function to the click.trigger;

<paper-item if.bind="!authenticated" class="login" style="padding-left:10px">
    <a paper-drawer-toggle href="/login" class="nav-link">
        <span class="fa fa-sign-in"></span>
        <span if.bind="fullmenu" class="nav-item">Login</span>
    </a>
</paper-item>

Upvotes: 1

Related Questions