designer

designer.html

<link rel="import" href="../polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html">
<link rel="import" href="../polymer-ui-submenu-item/polymer-ui-submenu-item.html">
<link rel="import" href="../polymer-ui-menu-item/polymer-ui-menu-item.html">
<link rel="import" href="../polymer-ui-tabs/polymer-ui-tabs.html">
<style>
  #polymer_ui_sidebar_menu {
    width: 300px;
    height: 600px;
    position: absolute;
    left: 110px;
    top: 90px;
  }
  #polymer_ui_tabs {
    position: absolute;
    left: 640px;
    top: 260px;
  }
  #canvas {
    overflow: hidden;
  }
</style>
<polymer-ui-sidebar-menu label="Polymer" theme="polymer-ui-dark-theme" selected="0" valueattr="name" selectedclass="polymer-selected" selectedattribute="active" selectedindex="0" activateevent="tap" id="polymer_ui_sidebar_menu" class="column polymer-ui-dark-theme flexbox ">
  <polymer-ui-submenu-item active="true" label="Topics" icon="settings" id="polymer_ui_submenu_item" class="polymer-ui-dark-theme polymer-selected" src>
    <polymer-ui-menu-item label="Topic 1" class="polymer-ui-dark-theme" src icon></polymer-ui-menu-item>
    <polymer-ui-menu-item label="Topic 2" class="polymer-ui-dark-theme" src icon></polymer-ui-menu-item>
    <polymer-ui-menu-item label="Topic 3" class="polymer-ui-dark-theme" src icon></polymer-ui-menu-item>
  </polymer-ui-submenu-item>
  <polymer-ui-submenu-item label="Favorites" icon="settings" id="polymer_ui_submenu_item1" class="polymer-ui-dark-theme" src>
    <polymer-ui-menu-item label="Favorites 1" class="polymer-ui-dark-theme" src icon></polymer-ui-menu-item>
    <polymer-ui-menu-item label="Favorites 2" class="polymer-ui-dark-theme" src icon></polymer-ui-menu-item>
    <polymer-ui-menu-item label="Favorites 3" class="polymer-ui-dark-theme" src icon></polymer-ui-menu-item>
    <polymer-ui-menu-item label="Favorites 4" class="polymer-ui-dark-theme" src icon></polymer-ui-menu-item>
  </polymer-ui-submenu-item>
  <polymer-ui-submenu-item label="Explore" icon="settings" id="polymer_ui_submenu_item2" class="polymer-ui-dark-theme" src>
    <polymer-ui-menu-item label="Explore 1" class="polymer-ui-dark-theme" src icon></polymer-ui-menu-item>
    <polymer-ui-menu-item label="Explore 2" class="polymer-ui-dark-theme" src icon></polymer-ui-menu-item>
  </polymer-ui-submenu-item>
</polymer-ui-sidebar-menu>
<polymer-ui-tabs selected="1" valueattr="name" selectedclass="polymer-selected" selectedattribute="active" selectedindex="1" activateevent="tap" id="polymer_ui_tabs" class="flexbox">
  <span id="span">One</span>
  <span id="span1" class="polymer-selected" active>Two</span>
  <span id="span2">Three</span>
  <span id="span3">Four</span>
</polymer-ui-tabs>