how can i show the avatar image outside the drawer in mui reactjs?

user_11599733 0
Viewed 277

i am trying to show the avatar image curve outside the sidebar border line.

i took the persistent drawer from mui v5 as an example and here is the codesandbox link

my target is to be like follows which was taken by another google example

in this example my drawer style is as followed:

<Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          //position: "relative",
          "& .MuiDrawer-paper": {
            width: drawerWidth,
            boxSizing: "border-box"
          }
        }}
        variant="persistent"
        anchor="left"
        open={open}
      >

and the Avatar's style inside the drawer header as followed:

<Avatar
  alt="test"
  src="./test.jpg"
  sx={{
    //position: "absolute",
    width: "120px",
    height: "120px",
    marginLeft: "150px"
  }}
/>

how can i achieve such style? please help me on this

flexbox material-ui react-hooks reactjs css
2 Answers

Add following styles

<Drawer
  sx={{
    "& .MuiDrawer-paper": {
      position: "relative",
      overflowY: "visible"
    },
  }}
>

<Avatar
  sx={{
    position: "absolute",
    top: 20,
    right: -60,
  }}
/>
user_32123790

Besides setting its position to absolute, you need to divide the Avatar size by 2, then negate it to move half of the Avatar outside of the Drawer. See this example:

<Avatar
  sx={{
    position: "absolute",
    top: 40,
    right: -60 / 2, // half the avatar size. negate it to move half outsize
    width: 60,
    height: 60
  }}
  {...}
/>

Codesandbox Demo

user_94494260
Related