Efficient Operation:
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>;
}
}However, it is currently not functioning as intended:
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>;
}
}The only difference between the two code blocks is the addition of the mdl-layout--fixed-header class. When using the fixed header, the drawer functionality stops working. Is there an issue with this implementation?