Storing Sidebar's state in localStorage

[Abdul Zaker Olive]

Hello. First of all, thank you so much for such an amazing dashboard. It has everything I've been looking for.

So for the last 3 days I have been trying to implement a simple feature which would store the sidebar's state in localStorage so that the user doesn't have to collapse/expand every time they reload the page. I have tried to achieve that by implementing my code in conjunction to the Dashboard's code and also tried solutions I found online but wasn't successful in any one of them.

It works fine when the user collapses and reloads the page. The reloaded page opens with the collapsed state. The problem arises when there is no state stored in localStorage or the user closed the window with expanded state. When the page is loaded again, the sidebar collapses first for a split second and then expands. Tried making the default to collapsed (also expanded) but didn't work. Could you please tell me if what I did was wrong or not?

Please note that I haven't changed any of the CSS codes.

Here's the code:

`if ($(window).width() >= 768) {
$(".header-light .content-wrapper footer .sidebar-toggle").css({"position": "relative"});

if (typeof window.isMinified === "undefined") {
  window.isMinified = false;
}
if (typeof window.isCollapsed === "undefined") {
  window.isCollapsed = false;
}

if (localStorage.sidebarState) {
    if(localStorage.sidebarState === 'sidebar-minified') {
      body.removeClass("sidebar-collapse sidebar-minified-out");
      body.addClass("sidebar-collapse sidebar-minified");
      collapseBtn.addClass('hidden');
      expandBtn.removeClass('hidden');
      window.isMinified = true;
    }else{
      body.removeClass("sidebar-minified");
      body.addClass("sidebar-minified-out");
      collapseBtn.removeClass('hidden');
      expandBtn.addClass('hidden');
      window.isMinified = false;
    }
}else{
  body.removeClass("sidebar-minified");
  body.addClass("sidebar-minified-out");
  collapseBtn.removeClass('hidden');
  expandBtn.addClass('hidden');
  window.isMinified = false;
}

$("#sidebar-toggler").on("click", function () {
  
  if (body.hasClass("sidebar-fixed") || body.hasClass("sidebar-static")) {
	let sidebarState;
    $(this).addClass("sidebar-toggle").removeClass("sidebar-offcanvas-toggle");
    if (window.isMinified === false) {
    	// console.log('collapsed');
      sidebarState = 'sidebar-minified'; 	
      body.removeClass("sidebar-collapse sidebar-minified-out").addClass("sidebar-minified");
      collapseBtn.addClass('hidden');
      expandBtn.removeClass('hidden');
      window.isMinified = true;
      localStorage.sidebarState = sidebarState;
    } else {
    	// console.log('expanded');
      sidebarState = 'sidebar-minified-out'; 	
      body.removeClass("sidebar-minified");
      body.addClass("sidebar-minified-out");
      collapseBtn.removeClass('hidden');
      expandBtn.addClass('hidden');
      window.isMinified = false;
      localStorage.sidebarState = sidebarState;
    }
  }
});

}

if ($(window).width() &gt;= 768 &amp;&amp; $(window).width() < 992) {
if (body.hasClass("sidebar-fixed") || body.hasClass("sidebar-static")) {
body.removeClass("sidebar-collapse sidebar-minified-out").addClass("sidebar-minified");
window.isMinified = true;
localStorage.sidebarState = 'sidebar-minified';
}
}`