Git Product home page Git Product logo

Comments (2)

matthttam avatar matthttam commented on May 27, 2024

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.

from startbootstrap-sb-admin.

matthttam avatar matthttam commented on May 27, 2024

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')
        }
    })
})

from startbootstrap-sb-admin.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.