Angular mat-sidenav allow overflow

When hover the background color will be white then the image will be converted from white to black which is working. But also the objective when hover show also the span text then overflow the white background to the right.

Objective

1. When hover background will be white - Done
2. When hover background must overflow to 150px since mat-sidenav has 70px width - In Process
3. Only show the span text when hover - In Process
4. When hover convert the image color white to black - Done

<mat-sidenav-container class="sidenav-container">
<mat-sidenav

class="sidenav" fixedInViewport

opened="true"
disableClose="true"
>



<div class="nav-list-container">

<mat-nav-list>

<a mat-list-item >
<div class="top-nav-list-item" >
<img [src]=" '/assets/images/sample.png'" alt="Icon"
class="bottom-list-item-icon"
style="width: 17px; "
>
<span>Show this image</span>
</div>

</a>



Css

.sidenav-container {
height: 100vh;
position: relative;
width: 100%;
background-color: transparent !important;
}

.sidenav {

margin-bottom: 30px !important;
margin-top: 10px !important;
margin-left: 10px !important;
border-radius: 10px;
width: 70px;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent !important;
box-shadow: 0 0 10px rgba(230, 190, 255, 0.8) !important;
// box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.sidenav .mat-toolbar {
background: inherit;
}



.mat-toolbar.mat-primary {
position: fixed;
top: 0;
z-index: 1;
}

.mat-sidenav-content {
// padding-top: 64px;
background-color: transparent !important;
}
.sidenav-content{
height: inherit;

}
.nav-list-container{
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 10px;
margin-top: 20px !important;
color: #2B59C2;
}

.top-nav-list-item{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

mat-nav-list a:hover {
background-color: white !important;
}

mat-nav-list a:hover .bottom-list-item-icon {
-webkit-filter: brightness(0);
}

.bottom-list-item-icon {

display: block;
margin: 0 auto;
}

Continue reading...