Localnav & Navigator UI changes and refactors

[marinaaisa]

Bug/issue #116401230, if applicable:

Summary

Localnav & Navigator UI changes and refactors:

• Navigator's font size increased
• UI Changes on Navigator's focus state
• Localnav should take the entire width of the page
• Integration of the Technology title into the Navigator
• Breadcrumbs are moved into the Hero
• Fix tests

Dependencies

NA

Testing

Steps:

1. Run docc-render
2. Assert that there are no regressions on the new UI changes that affect the localnav and navigator

Checklist

Make sure you check off the following items. If they cannot be completed, provide a reason.

• Added tests
• Ran npm test, and it succeeded
• Updated documentation if necessary

[mportiz08]

Haven't had time to fully test/review this yet, but I'm noticing a couple of potential issues and I have some subjective feedback on some of the design changes.

Design feedback:

• the increased font size in the navigator is a little jarring to me personally—it feels odd that it's so much bigger than the similar links in the Topics section on the actual page
• the hierarchy/eyebrow/title area can be pretty crowded now depending on the content of the 3 items—not sure of a great alternative offhand, just something I'm noticing
• the hover state for the hierarchy dropdown items seems a little off in dark mode, not sure if it was a color change or just a underline issue or what

Potential issues:

• some refactoring may be accidentally affecting font sizes of other elements outside of the nav items, not sure if that was intended
• I'm sometimes seeing JS errors in the console when using the nav filter—not exactly sure yet how to reproduce it reliably, but you may want to experiment with this and double check on that

I'd like to do some more review/testing but wanted to give you some initial feedback—I'm excited about the idea of cleaning up the nav elements and consolidating it in the way you've done here—very cool 😁

[marinaaisa]

Haven't had time to fully test/review this yet, but I'm noticing a couple of potential issues and I have some subjective feedback on some of the design changes.

Design feedback:

• the increased font size in the navigator is a little jarring to me personally—it feels odd that it's so much bigger than the similar links in the Topics section on the actual page
• the hierarchy/eyebrow/title area can be pretty crowded now depending on the content of the 3 items—not sure of a great alternative offhand, just something I'm noticing
• the hover state for the hierarchy dropdown items seems a little off in dark mode, not sure if it was a color change or just a underline issue or what

Thank you for the design feedback, @mportiz08 ! I'll sync with the design team about them.

Potential issues:

• some refactoring may be accidentally affecting font sizes of other elements outside of the nav items, not sure if that was intended

Yes, I'm aware of it. I also need to test the tutorials pages more.

• I'm sometimes seeing JS errors in the console when using the nav filter—not exactly sure yet how to reproduce it reliably, but you may want to experiment with this and double check on that

If you could help me to reproduce those errors, that would be fantastic!

I'd like to do some more review/testing but wanted to give you some initial feedback—I'm excited about the idea of cleaning up the nav elements and consolidating it in the way you've done here—very cool 😁

Thanks 😄

[marinaaisa]

@swift-ci test

[hqhhuang]

This is looking great! A few thoughts:

1. What's the reasoning behind moving the nav to the hero? I think it's alright in wide viewports, but quite confusing in the small viewport, as the nav dropdown now only shows the language switcher and API changes (when available) and doesn't provide actual nav information. It's also a bit hard to read in the hero, since the font blends in with the rest of the text.

2. Can we make the name of the technology more obviously clickable in the nav bar? It doesn't seem clickable to me until I started scrolling. Because we removed the bottom border, it is also a bit jarring that that piece of the UI is sticky when I scroll within the navigator. The name of the technology is also no longer sticky when I scroll down on the main documentation page, which I think is a regression we should avoid.

[marinaaisa]

@swift-ci test

[hqhhuang]

Found a few small things. Almost there!! 🎉

[marinaaisa]

@swift-ci test

[hqhhuang]

Just 1 more minor comment about displaying hierarchy in IDE mode.

[marinaaisa]

Just 1 more minor comment about displaying hierarchy in IDE mode.

Answered :)

[mportiz08]

LGTM

Since this is such a large restructuring/change, there may be additional issues that come up as we test things, but I think this is in a good state to merge and follow up on subsequent problems we encounter.

[marinaaisa]

@swift-ci test

She has approved