designer

designer.html

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="my-element" attributes="show left right open">

  <template>
    <style>    
      :host {
        display block;
        width: 100%;
        box-sizing: border-box;
      }
      .left { text-align: left; }
      .right { text-align: right; }
      .menu { text-align: center; }
      .menu:before { content:'\2630'; }
      nav, #toggle-menu { display: flex; }
      ::content > *, #toggle-menu > div { flex: 1; }
      .sm-only { display: none; }
      @media (max-width: 768px) { 
        .sm-only { display: block; }
        ::content > * { display: none; }
      }
    </style>
    <div id="toggle-menu">
      <div on-click="toggle('left')" class="sm-only left"><< {{left}}</div>
      <div on-click="toggle('center')"  class="sm-only menu"></div>
      <div on-click="toggle('right')" class="sm-only right">{{right}} >></div>
    </div>
    <nav>
      <content>
        <h3>Hei</h3>
        <h3>Hei</h3>
        <h3>Hei</h3>
        <h3>Hei</h3>
      </content>
    </nav>
  </template>

  <script>

    Polymer({
      left : 'left',
      right: 'right'
      toggle: function(direction) {
      	if(this.open === direction) {
      		this.open = '';
    		} else {
          this.open = direction;
        }
    	}
    });

  </script>

</polymer-element>