📥 Feedback wanted: Updates to sidebar and header on docs sites

[zenoachtig]

Hey there! Over the past weeks I have made an effort to modernise the look and feel of the sidebar and header on published docs sites. This mostly consists of small visual tweaks, alongside additional (opt-in) style choices. While I have tried very hard to keep everything looking familiar, you might notice small differences on your site. I'd love to hear your feedback on these changes 🙏

New sidebar styles

• Sidebar background styles – 🚀 Shipped: Use the new filled sidebar style to visually separate your navigation from your content. It will automatically adapt to your site's background colour and light/dark mode. The default style remains the same for all sites.
• Sidebar list styles – 🚀 Shipped: Change the style of list items in both the left sidebar and the page sidebar on the right. Use pill if you don't like lines, or line for a more technical look. The default style remains the same for all sites, but since the page sidebar now takes the same style, it might look slightly different from what you're used to.

Next steps for navigation

Here's a look at where we want to go with the navigation of docs sites. This is merely an illustration, as many of these elements are optional and styling is conditional to your site's customisation and enabled features.

• Vertical site sections – 🚀 Shipped: Site sections will now be displayed as a vertical list at the top of the sidebar when your site doesn't have a header. When there are more than 5 sections, the list will scroll. The horizontal tabs remain the default for all sites with a header.
• Bigger search bar – 🕐 Coming soon: when there is a lot of space in your header, the search bar will grow to make it easier to search your docs. When you have a lot of links in the header, the search bar will remain in its current position.
• Language selector – 🕐 Coming soon: We're working on improved language support for your content. Once this feature lands, we will present a new language dropdown in the header of your site (or with the variant selector if the site doesn't have a header).
• Moved variant dropdown – 🚀 Shipped: With all the changes above, the variant dropdown felt more at home at the top of the sidebar. We made sure that its behaviour is as close to the current behaviour: it remains sticky at the top of the sidebar, so is always available. If you have variants on your site, you should see the new position live now.

Feedback wanted!

We're testing these changes out and are very open to changing around, so if any of this doesn't work for you I would love to hear a little bit more about why not, so I can tweak or revert this change.

1. Do the things we shipped look good on your site? If not, please let me know!
2. If you have any thoughts on the proposed changes above, I'd love to hear.

[JaniceManwiller]

I just updated my sites to use the sidebar background and the pill list display.

I definitely like having the shading on the sidebar to better differentiate it from the main content. The pill highlighting also provides an additional visual hint as to what is currently selected.

One slight bit of flakiness with the pill list highlighting for the right-hand section TOC on individual pages - when I click a section heading, especially the last heading, on a page, the highlighting/pill doesn't always move to that section heading - it sometimes bounces to the top section or to a previous section.

[zenoachtig]

Hi Janice, thank you for your feedback! About the flakiness: could it be that you're trying to scroll to a section that isn't very long? We highlight the active section in the sidebar by checking which section is at (or near) the top of the screen. When the last section on the page is not tall enough to reach the top of the screen, it will never officially trigger as active. So even though you click it and we scroll to it, we can't scroll it to the top and it won't actually activate.

That is indeed a bit janky, but there's probably not much we can do about that besides introducing some complex Math to figure it out, which would probably get it wrong in other cases.

[JaniceManwiller]

Thanks for the response.

That does seem to be the issue - navigating to shorter sections near the end of a topic. While it is indeed janky, for now I'll just keep an eye out to see if it's noticed by other users/customers, and see if I need to disable the pills. Although based on what you said it seems like the issue would turn up regardless of the highlighting type - just more noticeable with the pills.

[denisemcg]

1. I also went with the shaded sidebar and pill options - they look great for my site. One request I have about this is the ability to determine the colors. I know these settings are linked to the primary color, but as that color also determines the inline link color. I'd love the shading and pill to be purple to match my branding but the links are not good in that color. I need to keep the links blue (expected by users and the most noticeable) which means I can't use purple in my primary color. Can we have a separate setting for link colors as per image 3 below?
   

2. I look forward to the bigger search bar, which'll be more noticeable to users.

3. I don't use site sections, languages, or variants, so no comments on those.
   Thanks

[zenoachtig]

Hey, thanks for your feedback! The first point you made is actually now possible by turning on the Tint colour option inside Customisation. It will let you pick a custom colour different from your primary colour, which will get used for secondary UI elements. The primary colour will still be used for links.

Right now enabling tint will also slightly colour your background, but we are planning to decouple these two settings from each other. We're also going to introduce tint to more elements for a more colourful look 😊

Let me know if that works for you!

[denisemcg]

Thanks for the info and that's great to hear. I've tried it out but I wait until you decouple those settings, as I don't want the color used in the background.