How to remember the toggle state of the sidebar menu?

I am using AdminLTE in combination with Codeigniter3. Therefore a lot of HTML is generated on the back-end of my application. I’d like to find a way to let the back-end know the toggle state (collapsed or open) of the sidebar menu so that I can generate the appropriate HTML for a page.

I tried to use the href in: <a href="<?= site_url("site/toggle");?>" class="sidebar-toggle" data-toggle="offcanvas" role="button"> but that doesn’t work because the href is not used.

Does anyone know a way to achieve this?

[rodruiz]

Hi, do not use cookies. It’s easier to use LocalStorage. I did it here.

• Store sidebar state

<script type="text/javascript">
    (function ($) {
        /* Store sidebar state */
        $('.sidebar-toggle').click(function(event) {
            event.preventDefault();
            if (Boolean(localStorage.getItem('sidebar-toggle-collapsed'))) {
                localStorage.setItem('sidebar-toggle-collapsed', '');
             } else {
                localStorage.setItem('sidebar-toggle-collapsed', '1');
             }
         });
    })(jQuery);
</script>

• Recover sidebar state

<script type="text/javascript">
    /* Recover sidebar state */
     (function () {
        if (Boolean(localStorage.getItem('sidebar-toggle-collapsed'))) {
            var body = document.getElementsByTagName('body')[0];
            body.className = body.className + ' sidebar-collapse';
        }
    })();
</script>

This works perfectly for me.

Thanks.

[EnnioWolsink]

Thanks @REJack for your script, works nicely!

I adapted it slightly so it uses localStorage. One of the advantages of this approach is that it remembers the state for all pages, whereas the cookie would be set per path. Basically this means the toggle state was remembered on a per page basis (at least in my browser, Chrome 61 on Windows 10), which may be ideal for some uses cases but not mine.

I also tried to reproduce the bug @kher09 mentioned, without much luck. Maybe someone else can chip in there.

    $.AdminLTESidebarTweak = {};

    $.AdminLTESidebarTweak.options = {
            EnableRemember: true,
            NoTransitionAfterReload: true
            //Removes the transition after page reload.
    };

    $(function () {
        "use strict";

        $("body").on("collapsed.pushMenu", function() {
            if($.AdminLTESidebarTweak.options.EnableRemember) {
                localStorage.setItem("toggleState", "closed");
            }
        });
            
        $("body").on("expanded.pushMenu", function() {
                if($.AdminLTESidebarTweak.options.EnableRemember) {
                    localStorage.setItem("toggleState", "opened");
                } 
        });

        if ($.AdminLTESidebarTweak.options.EnableRemember) {
            var toggleState = localStorage.getItem("toggleState");
            if (toggleState == 'closed'){
                if ($.AdminLTESidebarTweak.options.NoTransitionAfterReload) {
                    $("body").addClass('sidebar-collapse hold-transition').delay(100).queue(function() {
                        $(this).removeClass('hold-transition');
                    });
                } else {
                    $("body").addClass('sidebar-collapse');
                }
            }
        }
    });