destroy and init on resize

[isaydesign]

Hello, I'm trying to init / destroy a slinky menu, depending on the viewport size.
I'm using this function on resize:

const handleMenuMobile = function () {
    if (window.matchMedia("(max-width: 1099px)").matches) {
        const menuMobile = $('.menu-wrapper').slinky({
            title: true,
            theme: ''
        });

        console.log (menuMobile);
    }

    if (window.matchMedia("(min-width: 1100px)").matches) {
        if (typeof menuMobile !== 'undefined') {
            menuMobile.destroy();
        }
    }
}

The second bit of code (min-width: 1100px) doesn't work because it always returns menuMobile as undefined. I'm guessing this is a scope problem... Can you help me fix this?

Thanks in advance.

[alizahid]

This should fix your scope problem;

const handleMenuMobile = function() {
  let menuMobile

  if (window.matchMedia('(max-width: 1099px)').matches) {
    menuMobile = $('.menu-wrapper').slinky({
      title: true,
      theme: ''
    })
  }

  if (window.matchMedia('(min-width: 1100px)').matches) {
    if (typeof menuMobile !== 'undefined') {
      menuMobile.destroy()
    }
  }
}