Style switcher panel customisation

[fl-330]

Hello

I have added the ability to choose from the style switcher side panel wheter the left menu remains open or collapsed.

Actually it works, cookie is added, menu remains closed or open but the active state of the “Open” and “Close” buttons disapears when leaving index page.

Code added in style.switcher.html
<h5>Menu Open/Closed</h5>
<div class="options-links sidebar-collapse">
Open
Closed
</div>
Code added in style.switcher.js
setSidebarCollapse: function (a) {
var b = this,
c = $("html");
b.options.preserveCookies || $.cookie("sidebarCollapse", a), this.options.saveToStorage && "undefined" != typeof localStorage && localStorage.setItem("sidebarCollapse", a);
var d = this.container.find(".options-links.sidebar-collapse");
switch (d.find(".active").removeClass("active"), d.find("a[data-sidebar-collapse=" + a + "]").addClass("active"), c.removeClass("sidebar-left-collapsed"), a) {
case "open":
c.addClass("");
break;
case "closed":
c.addClass("sidebar-left-collapsed")
}
$.event.trigger({
type: "styleSwitcher.setSidebarCollapse",
color: a
})
},

Could you please tell me what I’ve done wrong ?

Best regards

Adel MHARI

---

Template Version: 2.1.1

[Support]

Hello Adel,

Please send us online test link with your project and this implementation. This way we can inspect, do some tests and help you to solve that issue.

Kind Regards,

Rodrigo.

---

[fl-330]

This reply has been marked as private.

[Support]

Hello Adel,

Thanks!

You need check the value of “sidebarCollapse” cookie/localStore and add the active class on respective button:

....
.....
...........
switch (d.find(".active").removeClass("active"), d.find("a[data-sidebar-collapse=" + a + "]").addClass("active"), c.removeClass("sidebar-left-collapsed"), a) {
	case "open":
		c.addClass("");
		d.find('[data-sidebar-collapse="open"]').addClass("active");
		break;
		
	case "closed":
		c.addClass("sidebar-left-collapsed")
		d.find('[data-sidebar-collapse="close"]').addClass("active");
}
....
.......
....

Make sure to run this code above on first load of page.

Hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[fl-330]

This reply has been marked as private.

[Support]

Hello Adel,

Please try adding the given code below inside build: function() {........}:

var sidebarCollapseCookie = $.cookie("sidebarCollapse");
var d = this.container.find(".options-links.sidebar-collapse");
switch (d.find(".active").removeClass("active"), d.find("a[data-sidebar-collapse=" + sidebarCollapseCookie + "]").addClass("active"), sidebarCollapseCookie) {
	case "open":
		d.find('[data-sidebar-collapse="open"]').addClass("active");
		break;
	case "closed":
		d.find('[data-sidebar-collapse="closed"]').addClass("active");
}

We hope this helps!

Kind Regards,

Rodrigo.If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[fl-330]

Hi Rodrigo

Thank you very much, “open” and “closed” active state is ok now.

One little thing is missing : Reset button doesn’t turn back the menu into default (open) state.

Best regards

---

[Support]

Hello,

Great!

Regarding reset, you need remove the “sidebarCollapse” cookie in the reset: function() {......}:

reset: function () {
	$.removeCookie("sidebarCollapse"), $.removeCookie("borderRadius"), $.removeCookie("colorPrimary"), $.removeCookie("colorSecondary"), $.removeCookie("colorTertiary"), $.removeCookie("colorQuaternary"), $.removeCookie("backgroundColor"), $.removeCookie("headerColor"), $.removeCookie("layoutStyle"), $.removeCookie("sidebarColor"), $.removeCookie("sidebarSize"), $.cookie("showSwitcher", !0), window.location.reload(), "undefined" != typeof localStorage && (localStorage.removeItem("skin-admin.css"), localStorage.removeItem("layout"))
},

Hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[fl-330]

Hi Rodrigo

I got it working as it should now. Thanks a lot again for your support and patience.

By the way, what do you think about adding this feature in a future release ?

Best regards

Adel

---

[Support]

Hello Adel,

Great!

If you need further assistance feel free to contact us.

Regarding this feature in a future release:
I will add this feature request to our list and discuss with our team. Thanks for the suggestion!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts