Sidenav to only work on smaller screens.

Topic: Sidenav to only work on smaller screens.

pyroweb free asked 3 months ago

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);

Add comment

Kamila Pieńkowska staff answered 2 months ago

0 0 Best answer

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 free commented 2 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 2 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 free commented 2 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 2 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.

Add comment

Kamila Pieńkowska staff answered 3 months ago

0 0 Best answer

You need to publish your snippet for me to be able to see it.

pyroweb free commented 2 months ago

I am sorry I didn't realise. I have published it now.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

pyroweb

0Support score
3Questions 0Answers 2Snippets