Unnecessary RightNav translation at the breakpoint

[imkarthikb]

I'm new to web frontend and really like this responsive navbar implementation but I notice an unncessary translation of the RightNav component when we adjust the browser width at the breakpoint.

The way to reproduce this is - Close the RightNav (if open) and adjust the browser width around the breakpoint (ie., 768px). We notice that the RightNav translates even though it is closed.

So I understand that the translation is causing this but it is needed -

responsive-navbar/src/components/Nav/RightNav.jsx

Line 17 in d083db8

transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(100%)'};

I tried to play around with visibility and opacity which does not seem to work, whereas display works but it overrides the transition we have. So I dont know the severity (chances of people actually encountering this one) but any way to avoid this ?

[paulobr4z]

transform: ${({ open }) => open ? 'translateX(-300px)' : 'translateX(0px)'};
 right: -300px;

[boomspot]

transform: ${({ open }) => open ? 'translateX(-300px)' : 'translateX(0px)'};
 right: -300px;

This worked for me. Thanks.