Nav component should accept an extra prop to set the background color of the renderIcon area

[donatoaguirre24]

In the following example, the whole navbar had the same background color.

I'm unable to reproduce it because there isn't a prop that allows changing the background of the renderIcon area for the Nav component. I can change the color of the icon but not the color of the button that wraps it.

I'm getting the following result:

It would be great if you can add this prop to set the background, the border-color and the background-color on hover for the Button that uses classes.collapseButton in src/components/Nav.js

[elitan]

I think if we can set z-index: 1201; to MuiDrawer-paperAnchorDockedLeft I think we can have the left navigation to go over the header.

@siriwatknp What do you think?

[siriwatknp]

@donatoaguirre24 For temporary fix, I will add collapsedIconProps to Nav. I will propose a permanent way later because now I'm working on mui-formik to integrate Material-UI with formik and it need custom styling solution, so I want both of the project to follow the same way.

[siriwatknp]

@elitan what is your use case? there is a props clipped to set Nav as the same layer as Header

[elitan]

@elitan what is your use case? there is a props clipped to set Nav as the same layer as Header

When I use this:

  const config = {
    ...standard_config,
    navVariant: {
      xs: 'temporary',
      sm: 'permanent',
      md: 'permanent',
    },
    collapsedBreakpoint: 'md', // collapse between sm and xs
    collapsible: {
      xs: false,
      sm: true,
    },
    clipped: true,
    squeezed: false,
    headerPosition: 'fixed',
  };

The Header has z-index: 1201 and the Nav has z-index: 1200. I was thinking if there was any way to get the Nav to be above (higher z-indez) than Header.

[siriwatknp]

@donatoaguirre24 Here it is!
https://siriwatknp.github.io/mui-layout/?path=/story/custom-styles--nav

[siriwatknp]

@elitan what is your use case? there is a props clipped to set Nav as the same layer as Header

When I use this:

  const config = {
    ...standard_config,
    navVariant: {
      xs: 'temporary',
      sm: 'permanent',
      md: 'permanent',
    },
    collapsedBreakpoint: 'md', // collapse between sm and xs
    collapsible: {
      xs: false,
      sm: true,
    },
    clipped: true,
    squeezed: false,
    headerPosition: 'fixed',
  };

The Header has z-index: 1201 and the Nav has z-index: 1200. I was thinking if there was any way to get the Nav to be above (higher z-indez) than Header.

Yes you can do this if you want to override the styles of Header

import { makeStyles } from '@material-ui/styles';

const useAppBarStyles = makeStyles(({ palette }) => ({
  root: {
    zIndex: 1190,
  },
}));

function App() {
  const appBarStyles = useAppBarStyles();
  return (
    <Root>
      <Header classes={appBarStyles} />
    </Root>
  )
}