How to close the block on the second click?

Question

css

Hello. I have a burger menu button with animation. Here is an example https://codepen.io/sequelone/pen/OOromj

And here is my JavaScript

jQuery(document).ready(function($) {
    var toggles = jQuery('.cmn-toggle-switch');

    toggles.on('click', function(e){
        e.preventDefault();
        jQuery(this).toggleClass("active");
    });

   var bsDefaults = {
         offset: false,
         overlay: true,
         width: '330px'
      },
      bsMain = $('.bs-offset-main'),
      bsOverlay = $('.bs-canvas-overlay');

   $('[data-toggle="canvas"][aria-expanded="false"]').on('click', function() {
      var canvas = $(this).data('target'),
         opts = $.extend({}, bsDefaults, $(canvas).data()),
         prop = $(canvas).hasClass('bs-canvas-right') ? 'margin-right' : 'margin-left';

      if (opts.width === '100%')
         opts.offset = false;
      
      $(canvas).css('width', opts.width);
      if (opts.offset && bsMain.length)
         bsMain.css(prop, opts.width);

      $(canvas + ' .bs-canvas-close').attr('aria-expanded', "true");
      $('[data-toggle="canvas"][data-target="' + canvas + '"]').attr('aria-expanded', "true");
      if (opts.overlay && bsOverlay.length)
         bsOverlay.addClass('show');
      return false;
   });

   $('.bs-canvas-close, .bs-canvas-overlay').on('click', function() {
      var canvas, aria;
      if ($(this).hasClass('bs-canvas-close')) {
         canvas = $(this).closest('.bs-canvas');
         aria = $(this).add($('[data-toggle="canvas"][data-target="#' + canvas.attr('id') + '"]'));
         if (bsMain.length)
            bsMain.css(($(canvas).hasClass('bs-canvas-right') ? 'margin-right' : 'margin-left'), '');
      } else {
         canvas = $('.bs-canvas');
         aria = $('.bs-canvas-close, [data-toggle="canvas"]');
         if (bsMain.length)
            bsMain.css({
               'margin-left': '',
               'margin-right': ''
            });
      }
      canvas.css('width', '');
      aria.attr('aria-expanded', "false");
      if (bsOverlay.length)
         bsOverlay.removeClass('show');
      return false;
   });
});

You need to open the menu canvas when you click on the button and close it when you click it again. Now only the opening works.

And here is the button by which the menu canvas is closed separately.

<header class="bs-canvas-header p-3 bg-white overflow-auto">
                <button type="button" class="bs-canvas-close float-left close" aria-label="Close">
                        <span aria-hidden="true" class="text-dark">&times;</span>
                </button>
        </header>

Answer 1

Problem solved:

jQuery(document).ready(function($) {
      $('.navbar-toggler').each(function () {
        $(this).click(function() {
          $('.navbar-toggler').toggleClass('active');
          $('.bs-canvas-overlay').toggleClass('show');
          $('.bs-canvas').toggleClass('active');;
          return false;
        })
    });

There is also another option:

jQuery(document).ready(function($) {
       let bsDefaults = {
          offset: false,
          overlay: true,
          width: '330px'
       };
    
       let bsMain = $('.bs-offset-main');
       let bsOverlay = $('.bs-canvas-overlay');
    
       $('.nav-link-collapse').on('click', function() {
          $('.nav-link-collapse').not(this).removeClass('nav-link-show');
          $(this).toggleClass('nav-link-show');
       });
    
       let documentMenu = {
          isOpen: false,
          hamburgerToggle: () => {
             if (documentMenu.isOpen === false) {
                $('.cmn-toggle-switch').addClass("active");
                // documentMenu.open();
             } else {
                $('.cmn-toggle-switch').removeClass("active");
                // documentMenu.close();
             }
             documentMenu.isOpen = !documentMenu.isOpen;
          },
    
          open: () => {
             documentMenu.hamburgerToggle();
    
             let canvas = $('[data-toggle="canvas"][aria-expanded="false"]').data('target'),
                 opts = $.extend({}, bsDefaults, $(canvas).data()),
                 prop = $(canvas).hasClass('bs-canvas-right') ? 'margin-right' : 'margin-left';
    
             if (opts.width === '100%')
                opts.offset = false;
    
             $(canvas).css('width', opts.width);
             if (opts.offset && bsMain.length)
                bsMain.css(prop, opts.width);
    
             $(canvas + ' .bs-canvas-close').attr('aria-expanded', "true");
             $('[data-toggle="canvas"][data-target="' + canvas + '"]').attr('aria-expanded', "true");
             if (opts.overlay && bsOverlay.length)
                bsOverlay.addClass('show');
             return false;
          },
    
          close: () => {
             documentMenu.hamburgerToggle();
    
             let canvas, aria;
             let object = $('.bs-canvas-close, .bs-canvas-overlay');
             if ($(object).hasClass('bs-canvas-close')) {
                canvas = $(object).closest('.bs-canvas');
                aria = $(object).add($('[data-toggle="canvas"][data-target="#' + canvas.attr('id') + '"]'));
                if (bsMain.length)
                   bsMain.css(($(canvas).hasClass('bs-canvas-right') ? 'margin-right' : 'margin-left'), '');
             } else {
                canvas = $('.bs-canvas');
                aria = $('.bs-canvas-close, [data-toggle="canvas"]');
                if (bsMain.length)
                   bsMain.css({
                      'margin-left': '',
                      'margin-right': ''
                   });
             }
             canvas.css('width', '');
             aria.attr('aria-expanded', "false");
             if (bsOverlay.length)
                bsOverlay.removeClass('show');
             return false;
          }
       };
    
       $('.cmn-toggle-switch').on('click', function(e){
          e.preventDefault();
          if (documentMenu.isOpen === false)
             documentMenu.open();
          else
             documentMenu.close();
       });
    
       $('.bs-canvas-close, .bs-canvas-overlay').on('click', function() {
          documentMenu.close();
       });
    });

Answer 2

Check if the menu canvas is display block then close it, if display is none then open it
Or check if there is such a class / id, if there is close, no open