Add transitions to Sections bg and line

[viktorrenkema]

This PR adds transitions to the Sections list in the top-right of a GBO site.

• mimic an effect that instead of each button having its own isolated background, we make it look like the button background is 'shared' between the nav items above and below
• also show a similar shared layout animation for the left blue line
• when one chapter is active, you hover a different chapter, upon removing your cursor from the chapter, the active/hover state will animate back to the chapter that is active
• respects prefers-reduced-motion

Related Slack thread.

Before:

CleanShot.2024-09-25.at.18.00.27.mp4

After:

CleanShot.2024-09-25.at.17.49.58.mp4

And dark mode:

[changeset-bot]

⚠️ No Changeset found

Latest commit: eab8feb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	38 changed	Sep 25, 2024, 4:22 PM

[SamyPesse]

@viktorrenkema can you run bun run changeset to write a changelog entry?

While I think it's a great addition, I'm slightly concerned on the animated background, I find the background to be quite heavy/distracting.

@zenoachtig what do you think? Here is a preview link: https://a859aaea.gitbook-open.pages.dev/docs.gitbook.com/content-editor/editor/navigation

[viktorrenkema]

@viktorrenkema can you run bun run changeset to write a changelog entry?

While I think it's a great addition, I'm slightly concerned on the animated background, I find the background to be quite heavy/distracting.

@zenoachtig what do you think? Here is a preview link: https://a859aaea.gitbook-open.pages.dev/docs.gitbook.com/content-editor/editor/navigation

I see what you mean, I also considered using a light grey instead, that'd be a bit more subtle. But yeah I'll let @zenoachtig provide his take :)

CleanShot.2024-09-26.at.16.39.56.mp4

[zenoachtig]

I agree with @SamyPesse's concern, i think the gray background is indeed a lot subtler and as a bonus it matches the left sidebar better 😄

The square corners on this element annoy me a bit, but I don't think rounding the two right corners is a good idea either. Probably nothing worth doing about.

[viktorrenkema]

I agree with @SamyPesse's concern, i think the gray background is indeed a lot subtler and as a bonus it matches the left sidebar better 😄

The square corners on this element annoy me a bit, but I don't think rounding the two right corners is a good idea either. Probably nothing worth doing about.

Yeah the sharp corners bug me too, but it also matches the 'was this helpful' picker below etc. we could prolly pimp this component in general, it can be prettier. but not worthwhile for now, and this pr provides the backbone for the interactive part and we can always tweak the exact design of it if we were to redesign the whole component.

@SamyPesse wdyt, keep the suggested gray background, or remove the background part altogether?

[BrettJephson]

Just having a look at the preview branch. I think this looks great and had a couple of minor suggestions:

1. When you have hovered over an item and then move away the highlight returns suddenly to the current item. Compare to how Remote do it with a fade out and I think the latter looks a bit slicker.
2. We could maybe do something with focus as well, I notice Remote moves the highlight to the focused element when you change focus even though you can still move the selection with cursor too.