Sidenav to Navbar on breakpoint

Dawid Wajszczuk staff commented 3 years ago

1. Do you mean something like this? https://mdbootstrap.com/docs/standard/navigation/sidenav/#subsection-mdb-navigation

2. I'm not sure if this is what you are referring to, but maybe you need to add left padding as in the example above or change sidenav's position following this example: https://mdbootstrap.com/docs/standard/navigation/sidenav/#section-sidenav-positioning

Lewis pro premium priority commented 3 years ago

Thanks Dawid, this is what I am after. Just missed it when looking through the examples. Only thing I can't get working is the toggler Sidenav:

Toggler:

Javascript:// Global menu changerconst sidenav = document.getElementById('sidenav');const instance = mdb.Sidenav.getInstance(sidenav);

let innerWidth = null;

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

innerWidth = window.innerWidth;

if (window.innerWidth < 660) {
  instance.changeMode('over');
  instance.hide();
} else {
  instance.changeMode('side');
  instance.show();
}

};

setMode();

// Event listeners

window.addEventListener('resize', setMode);

Dawid Wajszczuk staff commented 3 years ago

Works fine in this snippet that I have created: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3299439#js-tab-view. Maybe there is some typo or wrong id. Copy & paste code from my snippet and see if it works.