The box that includes the profile image, overlaps with the other lists in the sidebar. But for User experience, I was able to make them work independently
![Annotation 2023-05-24 111416](https://private-user-images.githubusercontent.com/19892192/240571405-c13bdc4f-02a2-4085-ab1e-085c39d3eb5c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE0MTM1MzgsIm5iZiI6MTcyMTQxMzIzOCwicGF0aCI6Ii8xOTg5MjE5Mi8yNDA1NzE0MDUtYzEzYmRjNGYtMDJhMi00MDg1LWFiMWUtMDg1YzM5ZDNlYjVjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE5VDE4MjAzOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWMzNjg4NmJhZDFkYmI2NmMzMzBkZjYxZmU2MDc1ZjZkMWFlM2VlNjQxYjQ1MjUwZjZlY2U3ZmQwZTMzNGRhOTMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.PpHMmrOcPWh3qJM81Zbj0tstSeRd1NdSnkem7FVDczM)
Here is the Before
![Annotation 2023-05-24 111527](https://private-user-images.githubusercontent.com/19892192/240571735-0dfcf445-b6e8-4d27-a539-fd403789d6ce.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE0MTM1MzgsIm5iZiI6MTcyMTQxMzIzOCwicGF0aCI6Ii8xOTg5MjE5Mi8yNDA1NzE3MzUtMGRmY2Y0NDUtYjZlOC00ZDI3LWE1MzktZmQ0MDM3ODlkNmNlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE5VDE4MjAzOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTliOTNlM2FlNzcwZjQwZGRkNTAwMDJlNGU2ZDlkNWI3Nzc2ZDY1ZGVkNWJkOTFlYmY2Y2EyYTRkY2JiNjJlMWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.oZcUiL5syY2yd_oVCaSa-vz7ajDJpYKxUCxk0pO81K4)
And here is the after.
const Sidebar = ({
user,
drawerWidth,
isSidebarOpen,
setIsSidebarOpen,
isNonMobile,
}) => {
// ...
return (
<Box component="nav">
{isSidebarOpen && (
<Drawer
// ...
>
<Box width="100%" display="flex" flexDirection="column" sx={{ position: "relative" }}>
{/* ... */}
<List sx={{ flex: 1, overflowY: "auto" }}>
{/* ... */}
</List>
<Box className="profileImage" sx={{
position: "sticky",
bottom: 0,
zIndex: 1,
backgroundColor: theme.palette.background.alt,
mt: "auto",
py: "1rem",
borderTop: `1px solid ${theme.palette.secondary[200]}`,
}}>
{/* ... */}
</Box>
</Box>
</Drawer>
)}
</Box>
);
};
export default Sidebar;