¿Como ocultar un menú lateral en html?

tengo un menú lateral creado con html, bootstrap y css. Ahora bien, lo que deseo es que de cualquier forma pueda ocultar mi menú lateral, preferiblemente con un boton hamburguesa.

Todo esto con el fin de que en el front de mi página necesito insertar mas columnas sin perder el tamaño que ya tengo predefinido en las fuentes.

Gracias por la colaboración

Acá les dejo mi código HTML.

    <div class="navbar-default sidebar" role="navigation" id="side-menus">                    
                    <div class="sidebar-nav slimscrollsidebar"> 
                        <div class="sidebar-head">
                        <a class="nav-toggler open-close waves-effect waves-light hidden-md hidden-lg" href="javascript:void(0)"><i class="fa fa-bars"></i></a>
                            <h3><span class="fa-fw open-close"><i class="ti-close ti-menu"></i></span> <span class="hide-menu">Navigation</span></h3>
                        </div>
                        <ul class="nav" id="side-menu">
                            <li style="padding: 70px 0 0;">
                                <a href="dashboard.html" class="waves-effect"><i class="fa fa-clock-o fa-fw" aria-hidden="true"></i>Panel de Control</a>
                            </li>
                            <li>
                                <a href="" class="waves-effect"><i class="fa fa-user fa-fw" aria-hidden="true"></i>Mi Perfil</a>
                            </li>
                            <li>
                                <a href="reporte-de-pagos-aceptados.php" class="waves-effect"><i class="fa fa-table fa-fw" aria-hidden="true"></i>Reporte de Pagos</a>
                            </li>
                            <li>
                                <a href="" class="waves-effect"><i class="fa fa-send fa-fw" aria-hidden="true"></i>Escribir a un Cliente</a>
                            </li>
                            <li>
                                <a href="" class="waves-effect"><i class="fa fa-university fa-fw" aria-hidden="true"></i>BANCOS - QR Pagos</a>
                            </li>
                            <li>
                                <a href="" class="waves-effect"><i class="fa fa-shopping-basket fa-fw" aria-hidden="true"></i>Delivery</a>
                            </li>
                            <li>
                                <a href="" class="waves-effect"><i class="fa fa-dollar fa-fw" aria-hidden="true"></i>Establecer Tasa Divisa</a>
                            </li>
                            <li>
                                <a href="" class="waves-effect"><i class="fa fa-paypal fa-fw" aria-hidden="true"></i>Gestionar PayPal</a>
                            </li>
                            <li>
                                <a href="" class="waves-effect"><i class="fa fa-info-circle fa-fw" aria-hidden="true"></i>Status del Sistema</a>
                            </li>

                        </ul>
                        <div class="center p-20">
                            <a href="https:lapollera.com.ve" target="_blank" class="btn btn-danger btn-block waves-effect waves-light">CERRAR SESION</a>
                        </div>
                    </div>                
                </div>