I am trying to get the sidenav to only work when the screen size is under 992px, I want it to display as a Navbar when over 992px. I can change the classes depending on the size of the screen but I have not been able to make the sidenav functionality work.

I have been looking to use sidenavInstance.dispose() when the width is over or not have it enabled by default and use Sidenav.getOrCreateInstance(sidenav) when the width is below.

How do these work?

The main problem is the styles that are added to the sidebar and how to make it so that does not appear over 992px.

width: 240px; height: 100vh; position: fixed; transition-duration: 0.3s; transition-property: transform, width, padding, margin; transition-timing-function: linear; transform: translateX(0%);

I have been testing it with snipets - https://mdbootstrap.com/snippets/standard/pyroweb/6253606

This is some of the javascript I have tested.

    const sidenav = document.getElementById('nav-side-1');
const sidenavInstance = mdb.Sidenav.getInstance(sidenav);

const sidenavul = sidenav.querySelectorAll('ul');
const sidenavli = sidenav.querySelectorAll('ul li');
const sidenava = sidenav.querySelectorAll('ul li a');

let innerWidth = null;

const setMode = (e) => {
  // Check necessary for Android devices
  if (window.innerWidth === innerWidth) {
    return;
  }

  innerWidth = window.innerWidth;

  if (window.innerWidth < 992) {
    sidenavInstance.changeMode('over');
    sidenavInstance.hide();
    sidenav.classList.add('sidenav');
    sidenav.classList.remove('navbar');
  } else {
    sidenav.classList.remove('sidenav');
    sidenav.classList.add('navbar');
    sidenavInstance.dispose(); 
  }
};

setMode();

// Event listeners
window.addEventListener('resize', setMode);