EDICIÓN: Para dar mas información este es el css del componente de la barra lateral, lo trabaje con scss:
#sidemenu{
background-color: var(--sidebar-primary-color);
color: white;
position: fixed;
height: 100%;
left: 0;
top: 0;
}
#sidemenu a{
color: white;
text-decoration: none;
}
/* HEADER */
#sidemenu .header{
box-sizing: border-box;//Para que no se hagan espacios adicionales
border-bottom: solid 1px var(--sidebar-secundary-color);
}
#sidemenu .header .title{
box-sizing: border-box;
overflow: hidden;
}
#sidemenu .header .title, .menu-btn{
vertical-align: middle;//Verticalizamos la posicion de las capaz para el boton hamburguesa
}
#sidemenu .header .menu-btn{
display: inline-block;
cursor: pointer;
padding: 10px;
width: var(--sidebarmenu-width-collapsed);//la variable es igual a 50px
box-sizing: border-box;
}
#sidemenu .header .menu-btn:hover{
background-color: var(--sidebar-secundary-color);
}
#sidemenu .header .menu-btn .btn-hamburguer{
background-color: white;
width: 100%;
height: 2px;
margin: 5px 0;
}
/* Profile */
#sidemenu .profile{
text-align: center;
border-bottom: solid 1px var(--sidebar-secundary-color);
padding: 10px;
.photo{
box-sizing: border-box;
padding: 0px;
margin: 0 auto;
overflow: hidden;
img{
width: 45%;
border-radius: 50%;
object-fit: cover;
}
}
.name{
font-size: 24px;
overflow: hidden;
}
}
#sidemenu .menu-items{
overflow: hidden;
.item{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
.item-text{
margin: 0px 0px;
width: 100%;
height: 40px;
display: flex;
cursor: pointer;
border-bottom: 1px solid var(--sidebar-secundary-color);
overflow: hidden;
box-sizing: border-box;
a{
width: 100%;
margin-left: 17px;
display: block;
margin-top: 11px;
}
.icon img{
width: 20px;
height: 20px;
margin-top: 9px;
margin-left: 17px;
}
}
.item-text:hover{
background-color: var(--sidebar-secundary-color);
}
}
}
//Ahora trabajamos en la clase menu-collapsed:
.menu-collapsed{
width: 50px;
.header .title{
width: 0;
height: 0;
padding: 0;
margin: 0;
}
.profile .photo{
width: 100%;
img{
width: 60%;
height: auto;
}
}
.profile .name{
display: none;
}
.menu-items .item{
width: 100%;
}
//Cuando le menu sidebar este expandido:
&.menu-expanded{
width: 300px;
box-shadow: 0 0 10px rgb(0, 0, 0, 0.5); //Para saber que el menu sidebar esta expandido
.header .title{
width: calc(100% - 50px);
margin-right: -5px;
padding: 20px;
span{
width: calc( 300px - 50px - 5px);//La medida para el span es le ancho del sidebar- los 50px de los iconos de cada menu - 5px
overflow: hidden;
display: inline-block;
}
}
.profile .photo{
img{
height: 127px;
}
}
.profile .name{
width: 100%;
display: block;
}
}
}