Currently, I am developing a project similar to Gmail. In order to achieve this, I need to design a div container that consists of various components such as Inbox, Send, Draft, etc. However, when I attempt to move these components around, the icons disappear and the layout becomes disorganized. For reference, you can view a screenshot here.
.sidebarOption{
display: flex;
align-items: center;
height: 40px;
padding: 0 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
cursor: pointer;
color: #818181;
}
.sidebarOption:hover,
.sidebarOption:hover > p,
.sidebarOption:hover > h3,
.sidebarOption--active,
.sidebarOption--active > p,
.sidebarOption--active >h3 {
background-color: #fcecec;
color: red;
font-weight: 800 !important;
}
.sidebarOption.MuiSvgIcon-root{
padding: 5px;
}
.sidebarOption > h3{
flex: 1;
margin-left: 10px;
font-size: 14px;
font-weight: 400;
}
.sidebarOption > p{
display: none;
font-weight: 300;
}
.sidebarOption:hover > p{
display: inline;
}
.sidebarOption--active > p {
display: inline;
}
After experimenting with relative positioning, the interface now appears like in this image.
I have attempted using different CSS properties such as position and right to make adjustments, but unfortunately, the icons vanish and the components remain disorderly.