Topic: Sidenav to only work on smaller screens.
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);
You need to publish your snippet for me to be able to see it.
I made your code somewhat better but it will need further development but I do not recommend using this solution.
https://mdbootstrap.com/snippets/standard/kpienkowska/6262018
pyroweb commented 1 months ago
Thank you this is better and I do know that the code needs a lot of work. My main issue is that the side nav creates a style attribute in the nav that still hides it when the screen size is over 992px which the sidenavInstance.dispose(); does not get rid of.
Would it be better to start with a navbar and create a sidenav if the screen size is below 992px?
Thanks,
Kamila Pieńkowska staff commented 1 months ago
It would be better to use sidenav and navbar separately. Components add styles, classes and attributes that they need and those are not stripped on the dispose.
I don't believe it is good idea to try to work around it. I think it is better to have navbar that gets hidden on smaller screens. And separate sidenav that can be showed only on smaller screens (toggle button can be hidden on bigger screens.
pyroweb commented 1 months ago
I can see how this will be the most simple and easy to use course but on large websites with big menus or mega menus with images and tabs this is going to create too many DOM elements.
Kamila Pieńkowska staff commented 1 months ago
Then maybe create those elements dynamically. When changing the breakpoint (and only then) dispose and remove the sidenav with all DOM elements and add navbar and the other way around.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 8.0.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: Yes