I'm currently improving a click to open navbar into a hover bar for a project. onMousteEnter and onMouseLeave works fine, navbar opens and closes on mouse hover. However my problem is that I can't add transition to it in css.. I am not sure what the problem could be.
My sidebar component:
export const Sidebar = props => {
const { open, modules } = props;
const onMouseEnter = useCallback(() => props.setMainMenuOpen(!open), []);
const onMouseLeave = useCallback(() => props.setMainMenuOpen(open), []);
return (
<div
open={setMainMenuOpen}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={`navigation ${open ? 'open' : ''}`}
data-test-id="navigation"
tabIndex="-1"
>
{modules.map(module => (
<SidebarItem key={module.id} module={module} />
))}
</div>
);
};
.navigation {
padding-top: 10px;
margin-bottom: 0;
margin-left: 0;
background: $color-sidebar-navigation-background;
text-align: center;
display: flex;
flex-direction: column;
position: relative;
z-index: 1303;
&.open {
z-index: 1303;
height: 100%;
width: 6 * $navigation--width;
box-shadow: 0 3px 14px 2px rgba(36, 36, 36, 0.12), 0 8px 10px 1px rgba(36, 36, 36, 0.14),
0 5px 5px -3px rgba(36, 36, 36, 0.2);
}
(everything works apart from transition)
I am trying to add the transition to the navigation className but it doesn't work. Tried adding to &.open{} as well but still nothing...
What I am trying to achieve is that the navbar has an open and close transition for smoother user experience.
I think you need to add visibility: 1 when it's opened and visibility: 0, otherwise. In that case your transition property would be applied to visibility of element.
If you are trying to add a transition to the width of your element, then you need to set the initial width of the element as well as the width it should change into. In general, for a transition, you need to specify the value of the property you're transitioning. In your case adding a width value to .navigation should make the transition work. Hope this helped.