React Hover Navbar Transition

Question

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.

Answer 1

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.

Answer 2

1. className={open? 'navigation': ''}

Answer 3

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.