Drawer not working with `mdl-layout--fixed-header` class

Question

It is well operated:

class Layout extends React.Component {
  render() {
    return <div className="mdl-layout mdl-js-layout">
      <div className="mdl-layout__header">
        <div className="mdl-layout__header-row">
          <span className="mdl-layout-title">Remember</span>
        </div>
      </div>

      <div className="mdl-layout__drawer">
        <span className="mdl-layout-title">Remember</span>
        <div className="mdl-navigation">
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
        </div>
      </div>

      <div className="mdl-layout__drawer-button">
        <i className="material-icons">menu</i>
      </div>

      <div className="mdl-layout__content">
        <div className="page-content">{this.props.children}</div>
      </div>
    </div>;
  }
}

But, It is not working now:

class Layout extends React.Component {
  render() {
    return <div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <div className="mdl-layout__header">
        <div className="mdl-layout__header-row">
          <span className="mdl-layout-title">Remember</span>
        </div>
      </div>

      <div className="mdl-layout__drawer">
        <span className="mdl-layout-title">Remember</span>
        <div className="mdl-navigation">
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
        </div>
      </div>

      <div className="mdl-layout__drawer-button">
        <i className="material-icons">menu</i>
      </div>

      <div className="mdl-layout__content">
        <div className="page-content">{this.props.children}</div>
      </div>
    </div>;
  }
}

Difference of two code block is just mdl-layout--fixed-header class. To using fixed header, inserted class mdl-layout--fixed-header stop working drawer. Is there any problem on this usage?

Answer 1

Well...

I found reason about it.

When using mdl-layout--fixed-header class,

<div className="mdl-layout__drawer-button">
  <i className="material-icons">menu</i>
</div>

wasn't needed.

:(

many thanks.