Polymer 1.0 - HIDE Paper Drawer Panel

Question

I am using Polymer 1.0 to implement paper-drawer-panel. I have some links on paper-header-panel topbar too. I have used the css selector for narrow to hide those links when narrow width. thus in mobile only using drawer for navigation. it looks like this right now on wide and narrow widths.

<paper-drawer-panel id="drawerPanel">
 <paper-header-panel drawer id="test1">
   <paper-toolbar><span>Menu</span></paper-toolbar>
     <paper-menu vertical layout>
       <paper-item data-route="home">Home</paper-item>
    <paper-item data-route="about">About</paper-item>
    <paper-item data-route="contact">Contact</paper-item>
    <paper-item> Dropdown</paper-item>
  </paper-menu>
 </paper-header-panel>
<paper-header-panel main>
  <paper-toolbar class="navbar">
  <paper-icon-button icon="menu" id="navicon" paper-drawer-toggle></paper-icon-button>

  <div>
    TryDjango
  </div>

  <span class="flex"></span>
  <paper-tabs selected="0" attr-for-selected="data-route" style="text-align:center" id="navbarmenu1">
  <paper-tab>Home</paper-tab>
  <paper-tab>About</paper-tab>
  <paper-tab>Contact</paper-tab>
  <paper-tab>Dropdown</paper-tab>
 </paper-tabs>
 <span class="flex"></span>
 <paper-tabs selected="0" id = "navbarmenu2">
 <paper-tab>Default</paper-tab>
 <paper-tab>Static Top</paper-tab>
 <paper-tab>Fixed Top</paper-tab>  
 </paper-tabs>
 </paper-toolbar>
 </paper-header-panel>
</paper-drawer-panel>

this is the css i used to hide my header-panel links when in narrow layout.

paper-drawer-panel[narrow] #navbarmenu1 {
    display: none;
}
paper-drawer-panel[narrow] #navbarmenu2 {
    display: none;
}

I gave those two paper-menu items IDs to hide them when [narrow]

HERE IS MY PROBLEM NOW:

I want to hide to drawer-panel all the time unless narrow. Like this: I can't use force-narrow on my drawer panel as it will hide my paper-header links even in wide width. So how can i make that drawer-panel hidden or implement what i want in a better way. any help is appreciated. :)

Answer 1

What you are looking for is implemented in the https://www.polymer-project.org/summit. They have implemented a custom element x-drawer. I am not sure whether the code for this website is published. However you can take a look at the code in your browser. It's well formatted. From that code, I see they have used 'visibility: hidden' to hide the drawer. Below is the complete definition of that element. Hope this helps!

<dom-module id="x-drawer" assetpath="../bower_components/app-layout/x-drawer/">

  <style>

    :host {
      position: absolute;
      top: 0;
      right: auto;
      bottom: 0;
      left: 0;
      width: 256px;
      overflow: hidden;
      background-color: var(--x-drawer-background-color, #fff);
      visibility: hidden;

      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);

      -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.42, 0, 0.33, 1.01);
      transition: transform 0.4s cubic-bezier(0.42, 0, 0.33, 1.01);
    }

    :host([position=right]) {
      right: 0;
      left: auto;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }

    :host([position=top]) {
      top: 0;
      right: 0;
      bottom: auto;
      left: 0;
      width: auto;
      height: 256px;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }

    :host([position=bottom]) {
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      width: auto;
      height: 256px;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }

    :host([opened]),
    :host([position][opened]) {
      visibility: visible;

      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

  </style>

  <template>

    <content></content>

  </template>

  <script>

    Polymer({

      is: 'x-drawer',

      behaviors: [
        Polymer.OverlayBehavior
      ],

      properties: {

        opened: {
          type: Boolean,
          value: false,
          notify: true,
          reflectToAttribute: true,
          observer: '_hasOpenedChanged'
        },

        position: {
          reflectToAttribute: true
        }

      },

      listeners: {
        'transitionend': '_onTransitionEnd'
      },

      toggle: function() {
        this.opened = !this.opened;
      },

      _hasOpenedChanged: function(opened, prev) {
        if (prev !== undefined) {
          this.style.visibility = 'visible';
        }
        this.shouldEnableScroll(true);
      },

      _onTransitionEnd: function(e) {
        if (e.currentTarget == this) {
          this.style.visibility = '';
        }
      }
    });

  </script>

</dom-module>

In your case, try removing [narrow] on display: none as below

paper-drawer-panel #navbarmenu1 {
    display: none;
}