Question

Sidebar Toggle Customization

0

Hi guys, I'm using a sidebar toggle to collapse/expand the panel on the left. My idea is to have a left arrow when expanded and a right arrow when collapsed. Both arrows are to be clicked on by the user. And so far I've only managed to change the toggle button for the left arrow icon. Wondering how you'd go about adding a right arrow as well. Thanks Expanded: Collapsed:

asked 2022-01-10

Alejandro Castrelo

1 answers

Marius van der Knaap · Accepted Answer · 2022-01-10

Hi Alejandro,

An expanded scrollcontainer gets an additional class: .mx-scrollcontainer-open. So you could manipulate the styling if the button is located within that container. For instance, you can do something like:

.mx-scrollcontainer-open .mx-name-sidebarToggle1 .glyphicon {
  transform: rotate(180deg);
  transition: all .2s ease-out;
}