Collapse sidebar on desktop

[hagl]

Fixes #200

I've also added the "Unison share" link for local environment.

I've tested on Chrome, FF & Safari on macOS

[hojberg]

:tada: Nice! This is super exciting!

I think we want to use Button.icon: https://github.com/unisonweb/codebase-ui/blob/main/src/UI/Button.elm#L71 for the toggle, but I'm realizing that we're missing a right and left chevron. I can add those quick.

For the link vs onClick thing, we might be able to utilize something like this Action thing in Button: https://github.com/unisonweb/codebase-ui/blob/main/src/UI/Button.elm#L36

What do you think?

[hojberg]

Got the Icons in a PR :D https://github.com/unisonweb/codebase-ui/pull/247

[hagl]

Thanks for the hints and icons, I'll try to implement that.

I initially implemented to create a different sidebar depending on sidebarToggled, but that interfered with the responsive behavior for small devices where the toggled sidebar is the one that is visible. Since I didn't want to make the elm code dependent on the screen width, I'm now always rendering both variants of the navigation elements and display/hide them in CSS depending on the toggled state.

[hagl]

@hojberg do you have a new design for the collapse button? If not I'd be happy with the PR being merged and I could come back to that later.

[hojberg]

@hagl Sorry for the delay. I've been explore things a bunch and I think we should do the floating button, and address the compactness of the surrounding buttons separate.

I'm worried that the "Unison Codebase" bit will look strange on Unison Share especially, but we can merge this like it is now and address in a follow up before deploying :D

Here's a mock of how this might end up looking.

Really excited for this! Great work 🎉

[hagl]

Thanks for your support, @hojberg! It was fun to work on this. The design above looks much clearer. I can give it a go in a separate PR