Issue with dynamic dock behavior

Ignition
1

Good morning everyone,

I am trying to implement a dynamic dock on the project I am developing. To do this, I followed suggestions from some videos and topics I found online to modify the stylesheet.css as follows:

.docked-view-left {
	width: auto !important
}

.psc-nav {
	width: 55px;
	transition: width 0.3s ease-in-out;
}

.psc-nav:hover { 
	width: 300px;
}

However, I am encountering the issue shown in the attached video, where you can see that when I click on the dropdown to change the language and move the mouse over the new language, the docked sidebar returns to the minimum width of 55px.
How can I avoid this issue?

Thank you.

2

I believe that the Selection components menu appears as a modal (it is not actually within your nav container) so it won't trigger the :hover pseudo-class for your style class when you enter it with your cursor.

You could probably mimic this functionality by using the onMouseEnter and onMouseLeave Mouse Events to change the class. The onMouseLeave event should only fire once your cursor leaves the bounds of the element so it should still work when you hover on the Dropdown modal.

I'd just change the .psc-nav:hover to another class (navExpanded or something) and use the script to switch between the two classes.

For onMouseEnter:

self.props.style.classes = 'navExpanded'

For onMouseLeave:

self.props.style.classes = 'nav'

There may be a pure CSS way of going about this, but I am not aware of how.