Docked sidebar interaction glitch

Ignition
1

Good morning everyone,

I'm currently using this CSS code to manage the opening and closing of a docked sidebar that handles the navigation menu.

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

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

.psc-navExpanded { 
	width: 300px;
	transition: width 0.3s ease-in-out;
}

and these are the code that I type on the view. I create also a custom to know the status of the docked so to manage some aesthetic changes.

OnMouseEnter

	self.props.style.classes = 'navExpanded'
	self.view.custom.docked_status = True

OnMouseLeave

	self.props.style.classes = 'navReduced'
	self.view.custom.docked_status = False

I have two questions for you:

  1. If I wanted to manage, at the user settings level, the option to make it always visible or not, would it be enough to handle the property of the self.props.style.classes class?
  2. One aspect I don't like (and it's a bit hard to explain in words) is that sometimes when the mouse stops at a specific point, the docked sidebar starts opening and closing continuously, as if it's in a loop. After trying other docked elements around the web, it seems almost as if the open/close action is too instantaneous. I'm wondering if it's possible to add a slight delay to the class modification.

Thanks for your help, and have a good day!