Navigator: add exit animation

[jameskoster]

For fun I was playing with animation values for the Navigator component and noticed a potential bug: the exit animation seems to be broken.

Take a look at the following video, where I slowed down the duration and tweaked the transform values to make the issue clearer:

navigator.mp4

When I click 'Pages', instead of the active 'Design' panel animating out of view, it disappears instantly. Likewise when I click back, the Pages panel disappears instantly.

It's not easy to spot on trunk as the duration for this animation is so low. But what is seen cannot be unseen 😆 Definitely not a high priority item, but I figured it was worth reporting.

cc @ciampo @mirka

[mirka]

I'm guessing the motion.div needs to be wrapped in an AnimatePresence.

[ciampo]

the exit animation seems to be broken.

Navigator has actually never supported exit animations 😃

We had a draft PR but we never iterated on it. I guess we could resume work on it at some point (and yes, as Lena suggested, we'd likely need to add AnimatePresence)

[ciampo]

Just stumbled upon this issue to say that Navigator now supports exit animations, as it's possible to see in the global styles sidebar.

The thing is, that since this PR was opened, the site editor's sidebar was migrated away from Navigator (from what I understand, due to some incompatibility between Navigator and the routing solution adopted for the site editor).