html - changing the Angular-material sidenav with a Polymer drawer -

i started material design , wanted use angular material features , elements polymer have , angular don't. tried changing sidenav in starter pack drawer panel , header panel this:
before:

<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdmedia('gt-sm')">     <md-toolbar class="md-whiteframe-z1">       <h1>users</h1>     </md-toolbar>     <md-list>       <md-list-item ng-repeat="it in ul.users">           <md-button ng-click="ul.selectuser(it)" ng-class="{'selected' : === ul.selected }">             <md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>             {{it.name}}           </md-button>       </md-list-item>     </md-list> </md-sidenav> 

after:

<paper-drawer-panel responsive-width="4000px">       <paper-header-panel class="waterfall tbackground" drawer>         <paper-toolbar class="specialtoolbar">             <div class="paper-font-title">content</div>           </paper-toolbar>     <md-list>       <md-list-item ng-repeat="it in ul.users">           <md-button ng-click="ul.selectuser(it)" ng-class="{'selected' : === ul.selected }">             <md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>             {{it.name}}           </md-button>       </md-list-item>     </md-list> </paper-header-panel> 

and whole nav dissapeared!...i have read possible use both , polymer , angular, simultaneously don't know how
imported btw...

polymer , angular can used together.

the responsive-width set on quite large value means it's being changed narrow layout. value of 4000px means if display smaller that, drawer forced off screen.

you can still access if tap , drag side of screen. or can put element (eg. button) paper-drawer-toggleattribute show it. otherwise, change responsive-width more moderate value (the default 640px).