Menú lateral

$(document).ready(function () {

$( "body" ).addClass( "menuCerrado" ); // Añadimos la clase al body, de esta manera siempre sabremos en que estado esta el menú desde la etiqueta body y podremos controlar los elementos que necesitemos vía CSS

$('nav').attr('id', 'sidebar-wrapper'); // Le cambiamos el ID a la etiqueta nav
$( "header" ).before( $( "#sidebar-wrapper" ) ); // Movemos el menú a donde nos interesa tenerlo

$("#cabecera").prepend("...");// Aquí creamos la capa que hará la función de máscara de contenido que evitará que podamos hacer click en otros elementos de la web cuando el menú está abierto (código completo en la descarga).
$("#cabecera").prepend("..."); // Por último creamos el botón hamburguesa dentro de la capa que nos interesa (código completo en la descarga).

  var trigger = $('.hamburger'),

     isClosed = false;

    trigger.click(function () {
      hamburger_cross();      
    });

    function hamburger_cross() { // Esta función es donde reemplazaremos las clases de los elementos clave según el estado del menú y que nos permitirá aplicarles los estilos necesarios para cada momento.

      if (isClosed == true) {          

        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
$( 'body' ).removeClass( 'menuAbierto' );
$( 'body' ).addClass( 'menuCerrado' );
$( '#mascara-contenido' ).removeClass( 'mostrar' );
$( '#mascara-contenido' ).addClass( 'ocultar' );
      } else {   

        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
$( 'body' ).removeClass( 'menuCerrado' );
$( 'body' ).addClass( 'menuAbierto' );
$( '#mascara-contenido' ).removeClass( 'ocultar' );
$( '#mascara-contenido' ).addClass( 'mostrar' );
      }
  }
 
  $('[data-toggle="offcanvas"]').click(function () {
        $('#base1024').toggleClass('toggled');
  }); 
});