#5 Adding Menus

In the previous post, we added the toolbar in our chrome app using Polymer. Today we will be adding four components :

• Drawer-panel menu
• Overflow menu
• Toast
• Icons

Add the following to add icons...You can look up here for more icons.

<link rel="import" href="bower_components/core-icons/social-icons.html">

Open "#4 Adding Polymer" post for reference.
Go to the HTML part (inside the Drawer panel) and add the Drawer-panel menu and Icons.

<!--drawer content goes here-->

 <core-menu theme="core-light-theme" class="drawer-menu">
  <core-item label="Explore" icon="explore" style="color: #673ab7;">
    </core-item>
  <core-item label="Surprise" icon="redeem" style="color: #ff5177;">
    </core-item>
  <core-item label="Shop" icon="shopping-cart" style="color: #38acff;">
    </core-item>
 </core-menu>

</core-header-panel>

Now let's add Overflow menu.

Before adding menu,we need to make some changes so that overflow menu comes at the right corner.

Head down to Main Toolbar part and within core-toolbar tag, add this : 

<core-toolbar class="medium">
<!-- div acts as flex container after layout attribute -->
 <div flex horizontal justified layout>
  <paper-icon-button icon="menu" core-drawer-toggle="" 
    style="align-self:center;"></paper-icon-button>

  <span style="display:flex;width:100%;justify-content:center;
    align-self:center;">Polymer  Chrome  App</span>

     <!--OVERFLOW MENU GOES HERE-->
 </div>
</core-toolbar>
<!--Main content goes here-->

Note that I changed the core-menu button to paper-icon-button...does not make much difference.

Now let's add the overflow menu.

<paper-menu-button>
 <paper-icon-button icon="more-vert"></paper-icon-button>
 <paper-dropdown class="dropdown" halign="right">
   <core-menu class="overflow-menu">
     <paper-item id="share">Share</paper-item>
     <paper-item>Settings</paper-item>
     <paper-item>Help</paper-item>
   </core-menu>
 </paper-dropdown>
</paper-menu-button>

Important:

1. class="dropdown" is necessary.
2. halign="right" opens the dropdown menu on the left.

And ya..don't forget the styling...

.drawer-menu {
 font-size: 20px;
 font-family: sans-serif;
}
.overflow-menu{
 color: #555;
}

Finally we add a Toast which appears on clicking the "Share" item from dropdown menu.

<!--Toast-->
<paper-toast id="toast" text="Thank you for sharing !!!" class="core-transition core-transition-left"></paper-toast>

Add this outside "core-drawer-panel" tag. And to link this to on-click of overflow-menu item , create a javascript file and link it to your HTML.

//link to paper-toast

document.getElementById('share').addEventListener('click',function(){
  document.getElementById('toast').toggle();
});

Loved it ? Feel free to leave comments and share.

                                                                                                                                          Next Post-->