I've added a custom scrollbar on <div class="sidebar__items"></div>, which expands on hover and shrinks otherwise. codepen sample

Since I couldn't find a way to add transition on the scrollbar(ie; on the scrollbar width) it just flicks now.

I tried :

.sidebar__items::-webkit-scrollbar {
    width: 0;
    transition: .5s ease;
}
.sidebar__items:hover::-webkit-scrollbar {
    width: .5rem;
}

I also tried something with borders but that just turned out to be more confusing.

compatibility isn't my primary concern since i'm only trying this on chrome and is a side project. Also i'm looking for a pure css or vanilla js implementation rather than any plugins or libraries.