LeftNav overlay content

[rkmax]

I am guiding me with the sources of documentation to structure an application.

but always the leftnav component overlays the content

I have

a App, Home and AppLeftNav components, i'll show only the JSX relevant code

App.jsx

<mui.AppCanvas predefinedLayout={1}>
    <mui.AppBar
        className="mui-dark-theme"
        onMenuIconButtonTouchTap={this._onMenuIconButtonTouchTap}
        title="Example App"
        zDepth={0} />

    <AppLeftNav ref="leftNav" />

    <Router.RouteHandler />
</mui.AppCanvas>

Home.jsx

<div className="mui-app-content-canvas">
    <div className="home-page-hero full-width-section">
        <div className="home-page-hero-content">
            <div className="tagline">
                <h1 className="brand-name">Sample Home Page</h1>
               <p>Lorem....</p>
            </div>
        </div>
    </div>
</div>

AppLeftNav.jsx

<mui.LeftNav
    ref="leftNav"
    docked={false}
    header={header}
    menuItems={menuItems}
    selectedIndex={this._getSelectedIndex()}
    onChange={this._onLeftNavChange}
    isInitiallyOpen={false} />

styles.less

@import "node_modules/material-ui/src/less/scaffolding";
@import "node_modules/material-ui/src/less/components";

Here is a screenshot of the problem

[rkmax]

The problem appears only when i compile the .less files as scripts and append to html later. if i send styles with html from server the problem is gone