Hola tengo algunas dudas y necesito de su ayuda, tengo un menú deslizante del lado izquierdo de mi pagina que se desliza y se contrae al paso del mouse, pero necesito que este menu se quede estatico cuando yo presione un boton, que herramienta puedo usar?

este es mi menu:

.menu-sidebarr{
width: 30px;
position: absolute;
left: 0;
margin-top: 82px;
bottom: 0;
background: #fff;
overflow: hidden;
-webkit-transition: width 0.5s;
}

.menu-sidebarr:hover{
width: 300px;
}

quiero que siga estando oculto hasta que presione el boton y este se muestre y se quede estático.