• HTML
• CSS
• JS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="list">
    <div class="user">
        <div class="imgBx">
            <img src="img.jpg">
        </div>
        <div class="details">
            <h3>Maureen Robison</h3>
            <p>Aerospace Enginner</p>
        </div>
    </div>
    <div class="navigation">
        <span><i class="fa-regular fa-pen-to-square"></i></span>
        <span><i class="fa-regular fa-heart"></i></span>
        <span><i class="fa-regular fa-trash-can"></i></span>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#222327;
}
.list
{
    display:flex;
    gap:6px;
}
.list .user
{
    display:relative;
    background:#fff;
    height:70px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:10px;
    padding:10px;
    gap:10px;
}
.list .user .imgBx
{
    position:relative;
    width:50px;
    height:50px;
    overflow:hidden;
    border-radius:6px;
}
.list .user .imgBx img
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.list .user .details
{
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.list .user .details h3
{
    font-weight:600;
    line-height:1.1em;
}
.list .user .details p
{
    font-weight:500;
    font-size:0.8em;
    color:rgba(0,0,0,0.6);
}
.navigation
{
    position:relative;
    width:40px;
    height:70px;
    background:#fff;
    border-radius:10px;
    transition:0.5s;
    display:flex;
    justify-content:center;
    align-items:center;
}
.navigation.active
{
    width:200px;
}
.navigation span
{
    position:absolute;
    width:6px;
    height:6px;
    background:#222327;
    border-radius:50%;
    transition:0.5s;
    display:flex;
    justify-content:center;
    align-items:center;
    border:3px solid #222327;
}
.navigation span:nth-child(1)
{
    transform:translateY(-12px);
}
.navigation span:nth-child(3)
{
    transform:translateY(12px);
}
.navigation.active span
{
    width:50px;
    height:50px;
    transition:0.5s;
}
/*.navigation.active span:nth-child(1),
.navigation.active span:nth-child(3)
{
    transform:translateY(0);
}*/
.navigation.active span:nth-child(1)
{
    transform:translateY(0) translateX(-60px);
}
.navigation.active span:nth-child(3)
{
    transform:translateY(0) translateX(60px);
}
.navigation span i
{
    transition:0.5s;
    font-size:0em;
}
.navigation.active span i
{
    font-size:1.25em;
    color:#fff;
}
.navigation.active span:hover
{
    background:#29fd53;
}
.navigation.active span:hover i
{
    color:#222327;
}

JS

let navigation = document.querySelector('.navigation');
navigation.onclick = function(){
    navigation.classList.toggle('active');
}

/*
    All the credits:https://www.youtube.com/watch?v=HWLcpnDJs90
*/