How can I remove the elevation (box shadow) from a material-ui AppBar over one small section?

user_3331268 0
Viewed 4696

I'm trying to get rid of the elevation shadow of the navbar over the sidebar.

enter image description here

I'm using Material-UI's AppBar for my NavBar component.

export default function NavBar() {
  return (
    <div>
      <AppBar position="fixed" elevation={4}>
        <Toolbar variant="regular">
          <IconButton edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    </div>
  );
}

I am using a custom sidebar component,

.sidebar {
  left: 0;
  top: 64px;
  height: 100vh;
  width: 70px;
  background-color: #3f50b5;
  position: fixed;
}

.sidebar::before{
  display: none;
}

I don't want to lose the elevation/shadow of the entire NavBar, just the section on the left where it's over the Sidebar.

jsx material-ui reactjs css
2 Answers

Adding this because I spent a lot of timing finding a simple answer to removing the elevation.

The simplest way to remove the shadow is by adding elevation prop to the AppBar.

<AppBar position="fixed" elevation={0}>

user_13786270

you could add a ::after pseudo element to your navbar to do the job. This element would have the width of your sidebar, and would be have a top property accordingly to your navbar.

Given the AppBar itself has some different breakpoints you would need to change top accordingly:

const useStyles = makeStyles((theme) => ({
  root: {
    "&::after": {
      position: "absolute",
      content: '""',
      width: "70px",
      height: "8px",
      top: "48px",
      backgroundColor: theme.palette.primary.main,
      [theme.breakpoints.down("xs")]: {
        top: "56px"
      },
      "@media (orientation: landscape)": {
        top: "48px"
      },
      [theme.breakpoints.up("sm")]: {
        top: "64px"
      }
    }
  }
}));

export default function NavBar() {
  const classes = useStyles();

  return (
    <div>
      <AppBar classes={{ root: classes.root }} position="fixed" elevation={4}>
        <Toolbar variant="regular">
          <IconButton edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    </div>
  );
}

I created a sandbox with only the navbar, and a darker shadow to enhance contrast:

my-description

user_92381340
Related