Remove sidebar

[amolpatel]

Is there any efficient way to remove the sidebar from a specific page? For example, for my charts.html file, I want to only display the top header but remove the sidebar completely. Is there any elegant solution to this?

[aryehbeitz]

I found a way:
on header.html i change to
<a class="navbar-brand" onclick="window.toggleNavbar()" style="cursor: pointer;">SB Admin 2</a>

on sb-admin-2.js i add inside $(function() {

window.showNavbar = true;
window.toggleNavbar = function() {
    if (window.showNavbar) { //showing and want to hide
        $("#page-wrapper").css({"margin": "0"});
        $('div.navbar-collapse').addClass('collapse');
        $('#side-menu').hide();
    }
    else if (!window.showNavbar) {
        $("#page-wrapper").css({"margin": "0 0 0 250px"});
        $('div.navbar-collapse').removeClass('collapse');
        $('#side-menu').show();
    }
    window.showNavbar = !window.showNavbar;
}

`
Then when clicking on the title, it toggles the side bar
Enjoy :)

[garciaba]

@aryehbeitz Nice solution, but now everytimes that you switch to another page, the sidebar collapses even if it was opened in the previos page. Any way to keep the state of the sidebar between views?

[aryehbeitz]

@garciaba
Ok, I found a solution using the localStorage.

In the sb-admin-2.js file, first remove the code above from inside the $(function() {.
Then, add the following to the bottom of the file, outside any function:

function hideNavbar() {
  $("#page-wrapper").css({"margin": "0"});
  $('div.navbar-collapse').addClass('collapse');
  $('#side-menu').hide();
}
function unhideNavbar() {
  $("#page-wrapper").css({"margin": "0 0 0 250px"});
  $('div.navbar-collapse').removeClass('collapse');
  $('#side-menu').show();
}
function toggleNavbar() {
    if (localStorage.showNavbar == 1) { //showing and want to hide
      hideNavbar();
    }
    else {
      unhideNavbar();
    }
    localStorage.showNavbar = (localStorage.showNavbar == 0)?1:0;
}

Now in the file sidebar.js, add to the body of the controller:

 if (localStorage.showNavbar === undefined) {
      localStorage.showNavbar = 1;
    }
    if (localStorage.showNavbar == 1) {
      unhideNavbar();
    } else {
      hideNavbar();
    }

Leave the line in the header.html as:
<a class="navbar-brand" onclick="window.toggleNavbar()" style="cursor: pointer;">SB Admin 2</a>

[kinho]

I'm using data-toggle="collapse" data-target=".navbar-collapse" in menu items.