Side nav init while hidden


Topic: Side nav init while hidden

stefangregg pro premium priority asked 2 years ago

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


mlazaru staff answered 2 years ago

data-mdb-hidden="true" should do the job, but I see it does not. We will fix this soon.

For now try this workaround untill we fix the bug:

CSS:

#sidenav-1 {
  display:none;
}

JS:

sidenavEl = document.getElementById('sidenav-1')
setTimeout(() => {
  sidenavEl.style.display = 'block'
}, 500)

https://mdbootstrap.com/snippets/standard/mlazaru/4247465#js-tab-view


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.4.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes