Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Remember Main sidebar collapsed state

See original GitHub issue

When collapsing the main left sidebar on a given page, how can the collapse state be ‘remembered’ for the other pages when they are loaded? Removing the collapse class in the <body> tag works, but shows first open then quickly closed, which is less than ideal.

Issue Analytics

State:
Created 8 years ago
Comments:10

Top GitHub Comments

46reactions

KLukacommented, Dec 4, 2016

Hi, and thanks for this. I used your idea with session storage and came up with this code that doesn’t display animations. Trick is to handle sidebar-collapse very early, just after the body tag is loaded. This way there is no need to use CSS tricks…

<body class="skin-black sidebar-mini">

  <script>
    (function () {
      if (Boolean(sessionStorage.getItem('sidebar-toggle-collapsed'))) {
        var body = document.getElementsByTagName('body')[0];
        body.className = body.className + ' sidebar-collapse';
      }
    })();
  </script>

  ...

  <script>
    // Click handler can be added latter, after jQuery is loaded...
    $('.sidebar-toggle').click(function(event) {
      event.preventDefault();
      if (Boolean(sessionStorage.getItem('sidebar-toggle-collapsed'))) {
        sessionStorage.setItem('sidebar-toggle-collapsed', '');
      } else {
        sessionStorage.setItem('sidebar-toggle-collapsed', '1');
      }
    });
  </script>

10reactions

etsandigcommented, Jan 30, 2016

Interesting approach! I didn’t think of going the CSS route. The following is a javascript based solution in case somebody may find it useful.

Basically I went to the original <body class="hold-transition skin-blue sidebar-mini sidebar-collapse"> tag from the template and added the ‘sidebar-collapse’ class, so the sidebar will always load collapsed by default. Next I added the following script snippet to each web page, just before the $(document).ready() if there is one (but not inside of it).

This takes care of the jittery animation, since it now expands when necessary, providing for a reasonably natural feel.

<script>
  if (Boolean(sessionStorage.getItem("sidebar-toggle-collapsed"))) {
    $("body").removeClass('sidebar-collapse')
  }

  $('.sidebar-toggle').click(function() {
    event.preventDefault();
    if (Boolean(sessionStorage.getItem("sidebar-toggle-collapsed"))) {
      sessionStorage.setItem("sidebar-toggle-collapsed", "");
    } else {
      sessionStorage.setItem("sidebar-toggle-collapsed", "1");
    }
  });

  $(document).ready(function() {
    // Document ready code here
  }
</script>