SolvedAdminLTE How to remember the toggle state of the sidebar menu?
โ๏ธAccepted Answer
I've fixed the external Script, with this is your 1. question answered :) i missed this on exporting it from my app.js
to the 2. question, thats a bit complicated, that would need a new CI Controller with 3 functions (2 create cookie + get created cookie/state) and you would need to switch in the JS the cookie based functions with $.post or $.get to get/send data to the CI Controller.
$.AdminLTESidebarTweak = {};
$.AdminLTESidebarTweak.options = {
EnableRemember: true,
NoTransitionAfterReload: false
//Removes the transition after page reload.
};
$(function () {
"use strict";
$("body").on("collapsed.pushMenu", function(){
if($.AdminLTESidebarTweak.options.EnableRemember){
document.cookie = "toggleState=closed";
}
});
$("body").on("expanded.pushMenu", function(){
if($.AdminLTESidebarTweak.options.EnableRemember){
document.cookie = "toggleState=opened";
}
});
if($.AdminLTESidebarTweak.options.EnableRemember){
var re = new RegExp('toggleState' + "=([^;]+)");
var value = re.exec(document.cookie);
var toggleState = (value != null) ? unescape(value[1]) : null;
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');
}
}
}
});
Other Answers:
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');
}
}
}
});
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.
simply use cookies
This is my solution:
JS
$.AdminLTESidebarTweak = {};
$.AdminLTESidebarTweak.options = {
EnableRemember: true,
NoTransitionAfterReload: false
//Removes the transition after page reload.
};
$(function () {
"use strict";
function setCookie(value) {
let name = 'toggleState';
let days = 365;
let d = new Date;
d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * days);
document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
}
$("body").on("collapsed.pushMenu", function () {
if ($.AdminLTESidebarTweak.options.EnableRemember) {
setCookie('closed');
}
}).on("expanded.pushMenu", function () {
if ($.AdminLTESidebarTweak.options.EnableRemember) {
setCookie('opened');
}
});
});
PHP (/resources/views/vendor/adminlte/master.blade.php)
<body class="hold-transition @yield('body_class') @if (Cookie::get('toggleState') === 'closed') {{ 'sidebar-collapse' }} @endif">
Laravel Cookies Middleware
<?php
namespace App\Http\Middleware;
use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;
class EncryptCookies extends Middleware
{
/**
* The names of the cookies that should not be encrypted.
*
* @var array
*/
protected $except = [
'toggleState',
];
}
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?