Sidenav Toggle ON with window width breakpoint if hidden

[matthttam]

Symptom: Sidenav appears during window resize if it was hidden before.

While using Chrome (and possibly others) you can load the sample https://startbootstrap.com/previews/sb-admin and recreate the issue by doing the following:

Click the horizontal bars that hides the menu from view.
Resize your window until the width is less than 994 pixels.
The expected result is that the sidenav stays hidden.
The actual result is that the sidenav comes into view.

The issue does not occur if the sidenav is not hidden during the resize.

I am actively trying to find a workaround to this issue.

[matthttam]

I think I've pinpointed the confusion in the CSS. It has to do with the term "toggled".
While the window width is large ( >= 992 px) the body gains the class sb-sidenav-toggled while HIDDEN.
While the window width is small ( < 992 px) the body gains the class sb-sidenav-toggled while VISIBLE.

This little mismatch works while for resizing the window from large to small while the nav is visible (aka no sb-sidenav-toggled class on the body) because when it triggers the @media query in CSS it loses its visibility.

But that means if it is hidden for the large view (aka has sb-sidenav-toggled class on the body) then resizing to a smaller view causes it to become visible and is pretty annoying to the end user.

I'm still trying to find a solution to this problem and if I do I'll post it here.

[matthttam]

I found a potential solution in case anyone else needs to fix this. I basically changed the selector for 3 CSS entries so that the logic about toggle was consistent. "toggled" means off with these changes. Hopefully this helps someone!

Around line 11381 change

.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
    display: none;
  }

to

body:not(.sb-sidenav-toggled) #layoutSidenav #layoutSidenav_content:before {
    display: none;
  }

Around 11347 change:

.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
  transform: translateX(0);
}

.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1037;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

to

body:not(.sb-sidenav-toggled) #layoutSidenav #layoutSidenav_nav {
  transform: translateX(0);
}

body:not(.sb-sidenav-toggled) #layoutSidenav #layoutSidenav_content:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1037;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

Finally it needs a little javascript to appropriately hide the menu when the window width is suddenly small. (optional really)

$(document).ready(function(){
    $('#sidebarToggle').on('click', event => {
        event.preventDefault();
        document.body.classList.toggle('sb-sidenav-toggled');
        value = document.body.classList.contains('sb-sidenav-toggled')
        localStorage.setItem('sb|sidenav-toggle', value);
        document.cookie="sb_sidenav_toggle="+value+"; path=/;expires="
    })

    $(window).on('resize orientationChanged', function(e) {
        var windowWidth = $(window).width();
        sbSideNav = $('.sb-nav-fixed').first()
        is_hidden = sbSideNav.hasClass('sb-sidenav-toggled')
        if(windowWidth < 994 && !is_hidden){
            $("#sidebarToggle").trigger('click')
        }else if(windowWidth > 994 && is_hidden){
            $("#sidebarToggle").trigger('click')
        }
    })
})