Side nav init while hidden

Hia, I am looking to get my side nav bar to initialize off-screen.

I currently have this for the side nav itself:

<nav id="nav_sidebar" class="sidenav bg-light" data-mdb-color="dark" data-mdb-mode="side" data-mdb-scroll-container="#nav_sidebar_scroller" data-mdb-content=".main_content" transitionDuration="0" data-mdb-expanded="false" data-mdb-hidden="true">

And I am doing some funky initiation stuff for changing modes based on size:

window.addEventListener('DOMContentLoaded', (event) => {
const sidenav = document.getElementById('nav_sidebar');
const sidenavInstance = mdb.Sidenav.getInstance(sidenav);
let innerWidth = null;
const setMode = (e) => {
  if (window.innerWidth === innerWidth) {return;}
  innerWidth = window.innerWidth;
  if(window.innerWidth < 560){sidenavInstance.changeMode('over');sidenavInstance.hide();
} else {sidenavInstance.changeMode('side');if($("#togglesidenav").attr("aria-expanded")=="true"){sidenavInstance.show();}}
};
setMode();
window.addEventListener('resize', setMode);
});

Basically it loads while on the page and then hides itself. Ideally I would like it to load off the page on mobile and just be static (aka normally on the page) on desktop. Any idea what I am doing wrong here?

I have uploaded a a video here to show (only available for 24 hours):

https://www.veed.io/view/b35ef7f8-7fba-4a33-ade3-939524746404?sharingWidget=true