Persistent AdminLTE sidebar state

Question

I've inherited some work on an AdminLTE sidebar on a Django website. The page in question uses an "extends" block to load AdminLTE's index.html page right off the bat. Links on our treeview sidebar cause the entire page to reload, including the sidebar, so the state of any expanded treeview menus is lost whenever someone clicks a link.

I'm guessing there's some well-known way of making the sidebar keep its treeview menus open, but I've yet to find it. There are some working examples on the AdminLTE site, but I can't figure out how they work.

Can someone point me to the right piece of documentation to help me make my sidebar persistent across page loads?

Answer 1

I'm not working on django, I work on a MVC Razor app. For the same problem, I use this solution : I store the link clicked on the menu (ajax send to the server and session storage, but you can use cookie or what you want). The link clicked is inserted in the java script below :

$(" ul.treeview-menu > li > a").on("click", function ()
    {
        if (this.href == "#")
            return;
        $.ajax({
            type: "POST",
            url: '/Outils/SetActiveMenu',
            data: { url: this.href },
            dataType: "json"
        });
    })
    $(document).ready(function () {
        var v = "@Html.Raw(Session["ActiveMenu"] == null?"": Session["ActiveMenu"].ToString())";
        if(v == "") return;
        var a = $('a[href="' + v + '"]');
        openParentMenu(a);
        a.css("background-color", "#E3E6E5");
    });
    function openParentMenu(item)
    {
        var parent = item.parent().closest("li.treeview");
        if (parent.length != 0) {
            openParentMenu(parent);
            parent[0].children.item("a").click();
        }
    }

Answer 2

I have used the inbuilt functionality mentioned by @MDT and have created a function:

function toggleCollapsibleList(){

//Get the clicked link and the next element
var $this = $('#parent-list-item-id');
var checkElement = $('#an-id-for-collapsible-li-with-treeview-class');

//Check if the next element is a menu and is visible
if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) {
    //Close the menu
    checkElement.slideUp(500, function () {
        checkElement.removeClass('menu-open');
        //Fix the layout in case the sidebar stretches over the height of the window
        //_this.layout.fix();
    });
    checkElement.parent("li").removeClass("active");
}
//If the menu is not visible
else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
    //Get the parent menu
    var parent = $this.parents('ul').first();
    //Close all open menus within the parent
    var ul = parent.find('ul:visible').slideUp(500);
    //Remove the menu-open class from the parent
    ul.removeClass('menu-open');
    //Get the parent li
    var parent_li = $this.parent("li");

    //Open the target menu and add the menu-open class
    checkElement.slideDown(500, function () {
        //Add the class active to the parent li
        checkElement.addClass('menu-open');
        parent.find('li.active').removeClass('active');
        parent_li.addClass('active');
        //Fix the layout in case the sidebar stretches over the height of the window
    });
}}

This worked for me :)

Answer 3

Here is the code for reference.

/* Tree()
   * ======
   * Converts the sidebar into a multilevel
   * tree view menu.
   *
   * @type Function
   * @Usage: $.AdminLTE.tree('.sidebar')
   */
  $.AdminLTE.tree = function (menu) {
    var _this = this;
    var animationSpeed = $.AdminLTE.options.animationSpeed;
    $(menu).on('click', 'li a', function (e) {
      //Get the clicked link and the next element
      var $this = $(this);
      var checkElement = $this.next();

      //Check if the next element is a menu and is visible
      if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) {
        //Close the menu
        checkElement.slideUp(animationSpeed, function () {
          checkElement.removeClass('menu-open');
          //Fix the layout in case the sidebar stretches over the height of the window
          //_this.layout.fix();
        });
        checkElement.parent("li").removeClass("active");
      }
      //If the menu is not visible
      else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
        //Get the parent menu
        var parent = $this.parents('ul').first();
        //Close all open menus within the parent
        var ul = parent.find('ul:visible').slideUp(animationSpeed);
        //Remove the menu-open class from the parent
        ul.removeClass('menu-open');
        //Get the parent li
        var parent_li = $this.parent("li");

        //Open the target menu and add the menu-open class
        checkElement.slideDown(animationSpeed, function () {
          //Add the class active to the parent li
          checkElement.addClass('menu-open');
          parent.find('li.active').removeClass('active');
          parent_li.addClass('active');
          //Fix the layout in case the sidebar stretches over the height of the window
          _this.layout.fix();
        });
      }
      //if this isn't a link, prevent the page from being redirected
      if (checkElement.is('.treeview-menu')) {
        e.preventDefault();
      }
    });
  };

Answer 4

Treeview css class works in an unordered list so any child links only show up when the parent list is clicked. An example of this is if you have "home" and then "About" "About-Locations". When you click About it is a tree-view class and on the sidebar it will show locations underneath it. When you click on home the locations sidebar link will not be displayed as this is how the css is written for the list.

The code can be found in the "AdminLTE.css" file.