Как исправить баг в jquery? (если работает первая функция то вторая не работает, и наоборот)

У меня есть две функции. Первая отвечает за слайд елемента, вторая за открытие/закрытие меню. Если я сперва открываю меню, функция слайда не работает. Если же я сперва активировал слайд елемента, то меню уже не открывается.

Первая функция работает только для экранов ниже 800px. Вторая же только для экранов больше 800px. Тоесть, если я открыл меню и увеличил экран до размеров когда появляеться елемент с анимацией, то при нажатий на елемент, анимации уже не происходит. Если же сперва нажал на елемент и прошла анимация, то при уменьшении экрана до размеров когда появляется меню, при нажатии на кнопку меню, оно не открывается. Чтобы функции начали работать надо перегружать страницу на нужном размере экрана.

Как это исправить?

Вот ссылка на прект:https://plupiks.github.io/MNTN/

jQuey КОД

const logoIcon = $('.account-body .account-icon')
const logoText = $('.account-title')
const body = $('.account-body')
const navButton = $('.burger-menu')
const mobileMenu = $('.mobile-menu')
const mediaQuery = window.matchMedia('(max-width: 800px)')
const mediaQueryMin = window.matchMedia('(min-width: 800px)')


if ($(window).width() < 800) {
    menuOpen();
} else {
    mobileMenu.removeClass('mobile-menu-active');
}

function menuOpen() {
  navButton.on('click', function(e){
    e.stopPropagation();
    mobileMenu.toggleClass('mobile-menu-active');
    $('.burger-menu--close').toggleClass('burger-menu--close-active')
    $('.burger-menu--menu').toggleClass('burger-menu--menu-disable')
  });
}



if (mediaQueryMin.matches) {
  body.on('mouseenter', function(){
    $(logoIcon).animate({ "left": "8px", "opacity": "1" }, "600" );
    $(logoText).animate({ "left": "8px" }, "600" ).css({"color": "#fbd784"});
  });

  body.on('mouseleave', function(){
    $(logoIcon).animate({ "left": "24px", "opacity": "0" }, "600" )
    $(logoText).animate({ "left": "0" }, "600" ).css({"color": "#fff"});
  });
}


$(window).click(function(){
  if (mobileMenu.hasClass('mobile-menu-active')) {
    mobileMenu.toggleClass('mobile-menu-active');
    $('.burger-menu--close').toggleClass('burger-menu--close-active')
    $('.burger-menu--menu').toggleClass('burger-menu--menu-disable')
  }
})

function menuRemoveClass() {
  if($(window).width() > 800) {
    $('.mobile-menu').removeClass('mobile-menu-active');
    $('.burger-menu--menu').removeClass('burger-menu--menu-disable')
    $('.burger-menu--close').removeClass('burger-menu--close-active')
  }
}

$(window).on('resize load',function(){
  menuRemoveClass();
})


mobileMenu.click(function(e){
  e.stopPropagation();
})