Material Design Lite: Dynamic Drawer Layout not showing with upgradeElement

application.hbs

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  
   //Auth is a service
    
  
  <main class="mdl-layout__content">
    <div class="page-content">
      
    </div>
  </main>
</div>

navigation-drawer.hbs

<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
  
    <span>Hi </span>
    <button type="button" name="logout">Logout</button>
  
    Login
  
</nav>

navigation-drawer.js

import Ember from 'ember';
/* globals componentHandler */

export default Ember.Component.extend({
  Auth: Ember.inject.service('Auth'),

  init() {
    this._super(...arguments);
    if(this.get('Auth').authenticated) {
      this.set('name', 'lokesh');
    }
  },

  didInsertElement () {
    this._super(...arguments);
    [].forEach.call(this.$(), function (el) {
        componentHandler.upgradeElement(el);
      });
  }
});

navigation-bar.hbs

<div class="mdl-layout__header-row">
  <span class="mdl-layout-title">Title</span>
  <div class="mdl-layout-spacer"></div>
  <nav class="mdl-navigation mdl-layout--large-screen-only">
    
      <button type="button" name="logout" >Logout</button>
    
      Login
    
  </nav>
</div>

navigation-bar.js

import Ember from 'ember';

export default Ember.Component.extend({
  Auth: Ember.inject.service('Auth'),
  actions: {
    logout() {
      this.get('Auth').logout();
    }
  }
});

Login route

import Ember from 'ember';

export default Ember.Route.extend({
  Auth: Ember.inject.service('Auth'),

  actions: {
    authenticate() {
      this.get('Auth').login();
      this.transitionTo('/');
    }
  }
});

<h3>Login Page</h3>
<button type="button" name="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Login</button>

What i am trying to do? I have a application route which has a navigation-bar displayed at all time and a navigation-drawer which should be displayed only if the user is logged in. so i wrote a condition to hide navigation-drawer. once user click login button in login route i am updating the AUTH service which is used across all the files. once user click login, he will routed to application route again. This time the condition will be true and navigation-drawer should show up. i checked in DOM. it has drawer. But the drawer button is not showing. When i refresh the page, it showed up. so i understood, material is acting on those components only during the onload time. However i understood that componentHandler.upgradeElement() is useful in case dynamic compoenents. i tried it in navigation-drawer.js. But it didn't work. Where i went wrong?