Issue in persist sidebar toggle between refreshes

[rajeshvaishnav]

when we enable this code and toggled sidebar

if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
document.body.classList.toggle('sb-sidenav-toggled');
}

after that when we hit refresh the sidebar comes for a second, I want when sidebar toggled its will completely hidden when refresh the page (right now its comes for second ) can you please suggest any solution for this issue.

please check attached gif file for more clarification.

[markvangeffen]

I changed the css so that it does not flow sideways anymore. I think the design is that it's supposed to work that way. I hope this solution helps you.

Greets,

Mark

.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
/* Changed sidenac toggle transition, now just hides the navbar with margin-left. The transform is outcommented /
margin-left: -225px;
/ transform: translateX(0); */
}

@media (min-width: 992px) {
#layoutSidenav #layoutSidenav_nav {
transform: translateX(0);
}
#layoutSidenav #layoutSidenav_content {
/* Changed sidenac toggle transition, now just hides the navbar with by commenting out transition /
margin-left: 0;
/ transition: margin 0.15s ease-in-out; */
}

[nikhilcb]

I changed the css so that it does not flow sideways anymore. I think the design is that it's supposed to work that way. I hope this solution helps you.

Greets,

Mark

.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav { /* Changed sidenac toggle transition, now just hides the navbar with margin-left. The transform is outcommented / margin-left: -225px; / transform: translateX(0); */ }

@media (min-width: 992px) { #layoutSidenav #layoutSidenav_nav { transform: translateX(0); } #layoutSidenav #layoutSidenav_content { /* Changed sidenac toggle transition, now just hides the navbar with by commenting out transition / margin-left: 0; / transition: margin 0.15s ease-in-out; */ }

couldn't understand, couldn't find those classes

[markvangeffen]

I changed the css so that it does not flow sideways anymore. I think the design is that it's supposed to work that way. I hope this solution helps you.
Greets,
Mark
.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav { /* Changed sidenac toggle transition, now just hides the navbar with margin-left. The transform is outcommented / margin-left: -225px; / transform: translateX(0); / }
@media (min-width: 992px) { #layoutSidenav #layoutSidenav_nav { transform: translateX(0); } #layoutSidenav #layoutSidenav_content { / Changed sidenac toggle transition, now just hides the navbar with by commenting out transition / margin-left: 0; / transition: margin 0.15s ease-in-out; */ }

couldn't understand, couldn't find those classes

You can find these in the styles.css. Good luck!