Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <title>paper-drawer-panel demo</title>
​
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
​
    <script src="http://blasten.github.io/ripple/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    
    <link rel="import" href="http://blasten.github.io/ripple/bower_components/paper-elements/paper-elements.html">
    <link rel="import" href="http://blasten.github.io/ripple/bower_components/paper-header-panel/paper-header-panel.html">
​
  </head>
​
  <body>
​
  <paper-drawer-panel>
    <paper-header-panel drawer>
            
     <paper-toolbar>
        <div title>Menu</div>
      </paper-toolbar>
      <paper-menu attr-for-selected='hash' class='list' selected='home'>
        <paper-item hash='home'>
          <paper-icon-button icon='home'></paper-icon-button>
          <a onClick="jQuery.get( &#39;/&#39;, {}, null, &#39;script&#39; );return false;" href="javascript:void(0);">Dashboard</a>
        </paper-item>
        <paper-item hash='help'>
          <paper-icon-button icon='help'></paper-icon-button>
          <a onClick="jQuery.get( &#39;/home/help&#39;, {}, null, &#39;script&#39; );return false;" href="javascript:void(0);">Help</a>
        </paper-item>
      </paper-menu>
      
    </paper-header-panel>
​
    <paper-header-panel main>
      <paper-toolbar id='mainToolbar'>
        <paper-icon-button elevation='1' icon='menu' paper-drawer-toggle></paper-icon-button>
        <div title>Application Name</div>
      </paper-toolbar>
      <div class='content m-scene' id='main-content'>
        <div class='container m-right-panel m-page scene_element scene_element--fadeinright'>
          content
        </div>
      </div>
     </paper-header-panel>
    
   
  </paper-drawer-panel>
​
​
    <script>
      (function(global) {
​
        'use strict';
​
        var DRAWER_ATTR = 'right-drawer';
​
        var pdp = document.getElementById('paperDrawerPanel');
​
        global.flipDrawer = function() {
          if (pdp.hasAttribute(DRAWER_ATTR)) {
            pdp.removeAttribute(DRAWER_ATTR);
          } else {
            pdp.setAttribute(DRAWER_ATTR, '');
          }
        }
​
      }(this));
    </script>
​
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
blastenpro
0viewers