Material-ui: LeftNav Covers AppBar

[hackingbeauty]

Hey, I'm using both the AppBar and LeftNav components. When the LeftNav is set to docked=true, it covers part of the AppBar. I'd like it to sit directly below AppBar.

  render() {
    let {onAddTask, onClear, tasks} = this.props;

    return (
      <AppCanvas>
        <AppBar />
        <LeftNav />
      </AppCanvas>
    );
  }

What am I doing wrong? Thanks!

[mkucharz]

@hackingbeauty you can play with the LeftNav styles, setting top: <AppBar.height> should do the trick.

[mkucharz]

Actually @patrykkopycinski told me that it supposed to be something like:

height: calc(100% - <AppBar.height>)
bottom: 0

Anyway playing with the styles is an option.

[travischoma]

Styling the height / top is not a good solution unfortunately because the Leftnav uses position: fixed. I managed to set the style so that it's correctly positioned / not covering the app bar, but when you pull/swipe up or down on the page you can see that the content and AppBar moves / rubber bands, but the leftnav is awkwardly stationary. When it's docked in that position you'd expect it to move with the rest of the page.

When docked=true it'd be better that the default is not to cover the Appbar and that it moves with the app bar, if you pull down on the app bar / cause it to rubber band.

[travischoma]

For anyone who was struggling with this. react-sidebar actually has some nice default behaviors, when it's docked it shifts the top bar / content right. Decent alternative until LeftNav matures a bit: https://github.com/balloob/react-sidebar . Nice thing is it's possible to mix and match material-ui components with others.

[mdeacey]

I'm also trying for this. Any updates with using the LeftNav and AppBar components instead of react-sidebar?

[alitaheri]

The rawTheme now suppoers zIndex, you can easily switch the zIndices to achieve this.

[AngelEyesChina]

@subjectix , that would mean the LeftNav will appear under the AppBar, yet I think the AppBar will hide the first items in the LeftBar.
It's my understanding that the desired behavior is similar to the way the docs look.

[alitaheri]

@AngelEyesChina Yes you are right. but since Levtnav is now composable you can simply add padding or margin.

[alitaheri]

With zIndices added to theme, achieving this is now possible.

[ericwooley]

@alitaheri So how would you do this? I'm still confused. How is it composable and how does that help?

height: calc(100% - <AppBar.height>)

How and were should this be used?

[max-waltham]

hi, this works for me.

class MyMenu extends Component {
  render() {
    const navStyle = {
      marginTop: 64,
      height: (window.innerHeight - 64)
    };
     return (
      <AppCanvas>
        <AppBar />
        <LeftNav style={navStyle} className="MY_LeftNav" />
      </AppCanvas>
     );
  }
}
const resizeLeftNav = () => {
  const leftNav = document.getElementsByClassName('MY_LeftNav')[0];
  if (leftNav) {
    leftNav.style.height = (window.innerHeight - 64) + 'px';
  }
};
window.addEventListener('load', resizeLeftNav, false);
window.addEventListener('resize', resizeLeftNav, false);

[josephmartin09]

Not sure if anyone is still having this issue, but in 0.15 alpha, the containerStyle prop allows for adjustment seamlessly (without having to do a DOM hack)

let forceNavDown = {'top': '64px'}
<LeftNav open={true} containerStyle={forceNavDown} >

This does not appear to be an option in any version before 0.15

[rs6g10]

@josephmartin09 , this works like a charm! Thank you for bringing this out!

[jebrial]

This actually worked for me (using 0.15.0-alpha.2):
containerStyle={{'position': 'absolute', 'top': '64px'}}

[femans]

@josephmartin09 this works indeed well.
I have one small detail; the shadow of the App Bar does not cast on the Drawer; and I feel like it should.
I tried overriding in the same way the z-index of either the AppBar or the Drawer, but it does not seem to work. zDepth doesn't work either, it just increases the size of the shadow. Do you (or anyone) have an explanation or solution for that?
Thanks!

[yashrahurikar]

Hey, I'm using both the AppBar and LeftNav components. When the LeftNav is set to docked=true, it covers part of the AppBar. I'd like it to sit directly below AppBar.

  render() {
    let {onAddTask, onClear, tasks} = this.props;

    return (
      <AppCanvas>
        <AppBar />
        <LeftNav />
      </AppCanvas>
    );
  }

What am I doing wrong? Thanks!

You will have to add the z-index property to the appBar class of the Appbar component
by default it has a marginLeft so remove that, your appBar class should be something like
appBar: {
[theme.breakpoints.up("sm")]: {
width: calc(100%)
},
zIndex: theme.zIndex.drawer + 1
}
and this class should be applied to your AppBar component of material ui

Hope this helps
Thanks