Sidebar toggle

[erchohke]

hi, im using adminlte 2.3.0 version , and currently having an issue with the sidebar. When i toggle the sidebar, it collapses but when i opening a new page. the sidebar opened again. this is the pic when it collapsed. then when i open a new page. the side bar should be still collapsed but it dont what should i do to fix this ? thanks any reply would be really appreciated.

and also, where do i i find the variables used to determine the saved themes color (red in this picture)

[lxsameer]

729 will fix this.

[erchohke]

@lxsameer no sir it doesn't...

[YasserHassan]

This is normal and out of AdminLTE's scope. Refer to #617, #315, #322, for that.

[ivantcholakov]

I use an AJAX request and save the sidebar state within a server session variable.

[rafaelrenanpacheco]

Another way is to not refresh the sidebar at all, using AJAX to load only the content container. But if you do need the entire page to refresh, refer to @ivantcholakov solution, or append something like "?sidebar=collapsed" in your URL. This way you can know before rendering your html if the state shall be expanded or collapsed.

As @YasserHassan said, this issue is more related with your app architecture, since AdminLTE does not define how you should refresh your page nor your contents.

[YasserHassan]

@rafael-renan-pacheco I think it would be better for such Single-Page Applications (SPAs) to use something like AngularJS or similar technology.

[erchohke]

@lxsameer @YasserHassan @rafael-renan-pacheco @ivantcholakov wow thanks guys for the responses. i have been trying to solve this from ever since I could remember.

@ivantcholakov can you give me the piece of code of ajax request sir ?

[ivantcholakov]

@erchohke

I use AdminLTE v2.1.2, heavily customized CodeIgniter (PHP) and jQuery, I hope you will be able to adapt code I've got. The idea is what is important.

1- Within your main HTML template, at the bottom place the following event handler, it contains the AJAX request I've mentioned:

    <script type="text/javascript">
    //<![CDATA[

    $(function() {

        $('#sidebar_toggle').on('click', function(e) {

            var body = $('body');
            var state = '';

            if (body.hasClass('sidebar-collapse')) {
                state = 'sidebar-collapse';
            }

            $.ajax({
                type: 'post',
                mode: 'queue',
                url: '<?php echo site_url('main-sidebar/toggle-ajax'); ?>',
                data: {
                    state: state
                },
                success: function(data) {

                }
            });
        });

    });

    //]]>
    </script>

2- A controller that should respond to the AJAX request should be created, it stores the sidebar state:

<?php defined('BASEPATH') OR exit('No direct script access allowed.');

class Toggle_ajax_controller extends Base_Ajax_Controller {

    public function __construct() {

        parent::__construct();

        $this->load->library('session');
    }

    public function index() {

        $this->output->set_header('Content-Type: application/json; charset=utf-8');

        $state = (string) $this->input->post('state');

        if ($state == '') {

            $state = null;
            $this->session->unset_userdata('main_sidebar_state');

        } else {

            $this->session->set_userdata('main_sidebar_state', $state);
        }

        $this->output->set_output(json_encode(array('state' => $state)));
    }

}

3- When a page loads, it needs to read from the stored session variable the state. When sidebar is collapsed then the body tag should have the attribute 'sidebar-collapse', otherwise not. Here is how my template starts:

<?php defined('BASEPATH') OR exit('No direct script access allowed');

echo html_tag('lang="'.$this->lang->code().'" dir="'.$this->lang->direction().'"');
file_partial('default_head');
echo body_tag('id="page-top" class="skin-purple'.' '.$this->session->userdata('main_sidebar_state').'"');

So, when the sidebar is collapsed the following body-tag is rendered:

<body class="skin-blue sidebar-collapse" id="page-top">

otherwise:

<body class="skin-blue" id="page-top">

This is it.

[YasserHassan]

@erchohke @ivantcholakov in my opinion, Ajax is too much for that. Just set a cookie once the sidebar is clicked with value set to status, say 1 = expanded and 0 = collapsed, without contact the server. I submitted a commit before for this event, add an event handle for it. This way you do not need to contact the server when a user changes sidebar status. Just check the cookie during page load instead of the serssion and set the sidebar class accordingly.

[ivantcholakov]

@YasserHassan I want to avoid cookies, they might cause extra-work due to juridical reasons. I don't want to get in the situation "describe every cookie and what you are using it for".

[YasserHassan]

@ivantcholakov this is a good point and it needs to be evaluated in the light of the overall cookie count set by the application and the framework used if any.

[erchohke]

@ivantcholakov @YasserHassan i see. there's so many ways to solve this issue. your code and explanation will help me and another people who find this issue . Thanks man !

[ivantcholakov]

A correction in the sample code, instead of:

$('#sidebar_toggle').on('click', function(e) {

write:

$('body').on('expanded.pushMenu collapsed.pushMenu', function(e) {

[YasserHassan]

Another way:

$('body').bind('expanded.pushMenu', function() {
  // ... sidebar expanded, do something...
});

$('body').bind('collapsed.pushMenu', function() {
  // ... sidebar collapsed, do something...
});

[jesobreira]

I think cookies are too much for it as well, as they get sent back to the server every request and its value does not matter for the server side application.

Here's my solution using localStorage:

<script>
  $(function () {
    if(localStorage.expandedMenu==0) {
        $("body").addClass('sidebar-collapse');
    }

    $('body').bind('expanded.pushMenu', function() {
      localStorage.expandedMenu = 1;
    });

    $('body').bind('collapsed.pushMenu', function() {
      localStorage.expandedMenu = 0;
    });
  });
</script>