[jQuery] Optymalizacja skryptu - skrócenie

Mam taki oto skrypt - napisany "na kolanie" tak aby działał.
Jest tu mnóstwo nadmiarowości - często wykonywane te same instrukcje ale z innymi parametrami/wartościami.

Myślałem o wrzuceniu tych powtarzających się elementów do jakiejś funkcji, a następnie wywoływanie tej funkcji z odpowiednimi parametrami.
Nie wiem czy to dobry pomysł - może jest jakieś inne rozwiązanie na które nie wpadłem?

$('#hamburger').click(function(){
  var th = $(this);
  var width = $(window).innerWidth();
  var m = 'full';
  if(th.toggleClass('expend').hasClass('expend')){
    $('.li-separator').css('background', '#fff');
    m = 'mobi';

    $('#menu').animate({
      'width' : 56
    }, 150, function(){
      th.find('i').attr('class', 'fa fa-bars');
    });

    $('#content').animate({
      'left' : 56,
      'width' : (width - 56)+'px'
    }, 150, function(){});
  }else{
    if(width > 1200) {
      $('.li-separator').css('background', '#f6f7fa');
      m = 'full';

      $('#menu').animate({
        'width' : 320
      }, 150, function(){
        th.find('i').attr('class', 'fa fa-long-arrow-left');
      });

      $('#content').animate({
        'left' : 320,
        'width' : (width - 320)+'px'
      }, 150, function(){});
    }else if(width <= 1200 && width >= 500){
      $('.li-separator').css('background', '#f6f7fa');
      m = 'mobi';

      $('#menu').animate({
        'width' : 320
      }, 150, function(){
        th.find('i').attr('class', 'fa fa-long-arrow-left');
      });

      $('#content').animate({
        'left' : 56,
        'width' : (width - 56)+'px'
      }, 150, function(){});
    }else{
      $('.li-separator').css('background', '#f6f7fa');
      m = 'mobi';

      $('#menu').animate({
        'width' : '100%'
      }, 150, function(){
        th.find('i').attr('class', 'fa fa-long-arrow-left');
      });

      $('#content').animate({
        'left' : 56,
        'width' : 'calc(100% - 56px)'
      }, 150, function(){});
    }
  }

  $.ajax({
    type: 'POST',
    url: 'handleAjax.php',
    data: 'm='+m
  });
});

$(window).resize(function(){
  var th = $('#hamburger');
  var width = $(window).innerWidth();
  var menuWidth = $('#menu').width();

  $('#content').css({
    'left' : menuWidth,
    'width' : (width - menuWidth)+'px'
  });
});

Na początek zobaczyłbym jakiś styleguide do jQuery, np. airbnb: https://github.com/airbnb/javascript#jquery--dollar-prefix
Wykonanie zapytania AJAXem można wrzucić do osobnej funkcji.
Nazwy zmiennych można poprawić (nazwa m nic nie mówi na początku).
IMO zamiast robić ciągle if/else lepiej użyć np. https://stackoverflow.com/questions/268132/invert-if-statement-to-reduce-nesting
Z tym animate raczej niewiele da się zrobić, jedynie chyba co to utworzyć osobne funkcje dla każdej szerokości.
I to function(){th.find('i').attr('class', 'fa fa-long-arrow-left');}) powtarza Ci się w 3 miejscach.
No i warto też jakoś sformatować ten kod, np. przy użyciu jakichś gotowych narzędzi VS Code.