Adminlte: Remember Main sidebar collapsed state

Created on 26 Jan 2016 · 10Comments · Source: ColorlibHQ/AdminLTE

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.

Source

etsandig

Most helpful comment

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>

KLuka on 4 Dec 2016

👍28 ❤13 🚀1

All 10 comments

I've recently had to use AdminLTE for a project and came across this but could not find a solid front-end solution. The closest I got was disabling CSS animations temporarily and then applying the .sidebar-collapse class to the body. My solution is below. Note that this only works with localStorage!

<!-- Custom styles to disable animation temporarily (inlined for show) -->
<style>
/* Probably doesn't need all these prefixes but oh well */
.disable-animations, .disable-animations * {
  /* CSS transitions */
  -o-transition-property: none !important;
  -moz-transition-property: none !important;
  -webkit-transition-property: none !important;
  transition-property: none !important;
  /* CSS transforms */
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  /* CSS animations */
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  animation: none !important;
}
</style>

<!-- AdminLTE JavaScript -->
<script src="AdminLTE/dist/js/app.js"></script>

<!-- Custom scripts loaded AFTER AdminLTE JavaScript (inlined for show) -->
<script>
$(function ($) {
  var $body = $('body');
  // On click, capture state and save it in localStorage
  $($.AdminLTE.options.sidebarToggleSelector).click(function () {
    localStorage.setItem('sidebar', $body.hasClass('sidebar-collapse') ? 1 : 0);
  });

  // On ready, read the set state and collapse if needed
  if (localStorage.getItem('sidebar') === '0') {
    $body.addClass('disable-animations sidebar-collapse');
    requestAnimationFrame(function () {
      $body.removeClass('disable-animations');
    });
  }
});
</script>

alexgalletti on 26 Jan 2016

👍5

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>

etsandig on 30 Jan 2016

👍7 ❤3

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

KLuka on 4 Dec 2016

👍28 ❤13 🚀1

@KLuka I'm using your solution with Localstorage and this is working fine. Thanks

lenamtl on 11 Jan 2017

I find @KLuka's solution awkward, because it looks like the sidebar is jumping to collapse state..
So what I've done is to perform an ajax to the server and save a session of the sidebar state... then render it on the body tag via php.