'Save adminlte customization state

I am using AdminLte. You can customize web for yourself(dark mode, nav compact, ...).docs But when I go to another page all customized state removes. How to save state?

laraveladminlte


Solution 1:[1]

You 3 Options to manage this

1- Store In Database on User Mode (if user click on button dark mode store bool in the column) and get on Login Method

2- Store In Session but when the user logout all sessions will destroy.

3- Store In Cookie

all options have pros and cons with respectively. you have to decide.

Solution 2:[2]

My solution for AdminLTE 3.2 (with preloader screen for minimized cards)

var common = {
    init: function () {
// Cookies
let interface = {collapsed: []}; // default value
let interfaceCookies = common.getCookie('interface');
if (interfaceCookies != null)
   interface = JSON.parse(interfaceCookies);
common.setCookie('interface', JSON.stringify(interface));

// SideBar showed
$('[data-widget="pushmenu"]').on('click', function () {
let sideBarShowed = $('body').hasClass('sidebar-collapse');
common.setCookie('sideBarShowed', sideBarShowed ? 'true' : 'false');
});

// Minimized cards
interface.collapsed.forEach(x =>{
            $('.card-header:contains(' + x + ')').find('[data-card-widget="collapse"]').click();
        });

        $('[data-card-widget="collapse"]').on('click', function () {
            let thisCardTitle = $(this).closest('.card-header').find('.card-title').text();
            let interface = JSON.parse(common.getCookie('interface'));
            let thisIndex = interface.collapsed.indexOf(thisCardTitle);
            if (thisIndex !== -1)
                interface.collapsed = interface.collapsed.splice(interface.collapsed, thisIndex);
            else
                interface.collapsed.push(thisCardTitle);
            common.setCookie('interface', JSON.stringify(interface));
        });



// Cookies methods
setCookie: function (name, value, days = 30) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    },
    getCookie: function (name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }
};

PHP

// And php code for laravel (there is dark/light theme too)
<body class="sidebar-mini layout-fixed @if(Cookie::get('sideBarShowed', 'true') != 'true') sidebar-collapse @endif @if(Cookie::get('theme', 'light') == 'dark') dark-mode @endif">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Waleed Muaz
Solution 2 DecoderCoder

Related Questions