Implement collapsible sidebar with smooth animation

The connection indicator was moved to the right so that it always remains
visible everything else is collapsed, when pressing the new menu button.
A few places use slightly different spacing to making everything work.

Unfortunately, Chakra does not provide a “Horizontal Collapsible” component
(only a vertical collapsible and an horizontal overlay drawer), so a DIY approach
inspired by https://v2.chakra-ui.com/community/recipes/horizontal-collapse was
needed by to implement this with nice animations.

Updates to React 18 + Chakra 2 + Framer-Motion 11, since animation support
needs a newer Framer-Motion version which pulls in newer React which again
is only supported by newer Chakra.

Fixes ekzhang#61