Agregué una barra de desplazamiento personalizada en <div class="sidebar__items"></div> , que se expande al pasar el mouse y se reduce de lo contrario. muestra de código abierto

Como no pude encontrar una manera de agregar transición en la barra de desplazamiento (es decir, en el ancho de la barra de desplazamiento), ahora simplemente se desplaza.

Lo intenté :

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

También probé algo con bordes, pero resultó ser más confuso.

la compatibilidad no es mi principal preocupación, ya que solo intento esto en Chrome y es un proyecto paralelo. También estoy buscando una implementación pura de css o vanilla js en lugar de complementos o bibliotecas.