Currently, I am attempting to display the avatar image with a curved effect outside the border line of the sidebar.
I have referenced the persistent drawer from MUI v5 for inspiration. You can view an example here: the codesandbox link
The desired outcome is illustrated in this image: https://i.stack.imgur.com/ACaXh.jpg
In my current implementation, the drawer's style is configured as follows:
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
//position: "relative",
"& .MuiDrawer-paper": {
width: drawerWidth,
boxSizing: "border-box"
}
}}
variant="persistent"
anchor="left"
open={open}
>
Furthermore, the style applied to the Avatar within the drawer header is outlined below:
<Avatar
alt="test"
src="./test.jpg"
sx={{
//position: "absolute",
width: "120px",
height: "120px",
marginLeft: "150px"
}}
/>
I am seeking assistance on how to achieve this specific visual style. Any help would be greatly appreciated.