header-menu.html

<dom-module id="header-menu">

  <style>
    :host {
      --paper-input-container-color:       var(--dark-primary-color);
      --paper-input-container-input-color: var(--accent-color);
      --drawer-menu-text-color:            var(--secondary-text-color);
      --paper-dropdown-menu-button: {
        padding-right: 0px; 
      };
    }
    /*overwrites the bold property from the paper-menu style*/
    .iron-selected {
        font-weight: normal !important;
    }
    #dialogButtons {
      margin-bottom: 24px;
    }
  </style>
  
  <template>
    <div>
      <paper-menu-button>
        <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
          <paper-menu id="headerMenu" class="dropdown-content">
            <paper-item id="item-create" data-dialog="createDialog"> 
              <paper-button id="button-create" onclick="clickHandler(event)">Create</paper-button>
            </paper-item>
          </paper-menu>
      </paper-menu-button>

      <paper-dialog id="createDialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
        <h2>Create New</h2>
        <div>
          <h4>Name</h4> <paper-input type="text" name="scene-name"></paper-input>
          <h4>Dimensions</h4> <br>
          <div>
            <div>        
              <div class="inline-block dialog-input-width">
                <paper-input type="text" label="width" name="width" auto-validate pattern="[0-9]*" error-message="numbers only!"></paper-input>
              </div>
              <div class="inline-block dialog-dropdown-width no-right-padding">
                <paper-dropdown-menu class="paper-menu-button-styling">
                  <paper-menu class="dropdown-content">
                    <paper-item>px</paper-item>
                    <paper-item>inches</paper-item>
                  </paper-menu>
                </paper-dropdown-menu>
              </div>
            </div>
          </div> 

          <div id="dialogButtons" class="right-align">
            <paper-button dialog-confirm>Create</paper-button>
            <paper-button dialog-dismiss>Cancel</paper-button>
          </div>
        </div>
      </paper-dialog>

    </div>
  </template>

  <script>
    Polymer({
      is: "header-menu",
      properties: {
      }
    });
    
    function clickHandler(e) {
      var button = e.target;
      while (!button.hasAttribute('data-dialog') && button !== document.body) {
        button = button.parentElement;
      }
      if (!button.hasAttribute('data-dialog')) {
        return;
      }
      var id = button.getAttribute('data-dialog');
      var dialog = document.getElementById(id);
      if (dialog) {
        dialog.open();
      }
    }
  </script>

</dom-module>