[Navigation]: Updates

[fallaciousreasoning]

@AlanBreck @aguscruiz was just trying to replace the customize dialog on the new tab page with the Navigation component. It's pretty good but there are a few things that look off / not as good as the old one:

1. The active indicator doesn't animate (this is pretty important, it looks really good in the current one)
2. The hover effects don't look quite right to me

Old:
Screencast from 2024-03-27 11-25-46.webm

New:
Screencast from 2024-03-27 11-25-02.webm

[aguscruiz]

Yeah, agreed on both. We need the animation to make it look good.

And the hover effect, yes, it does look weird, huh. I think it's because it doesn't have a right edge to go against and it's just floating there.

Would it be a lot of work to convert the layout to this? It's the layout I'm using in other places throughout the products.

• Adds a gray background with a small white padding around it, to delineate the difference between content and navigation.
• Unifies the nav with the rest of the page

https://www.figma.com/file/lVTufBkl5eNrtOQjlAHxjb/Search-box-in-NTP?type=design&node-id=351%3A3976&mode=design&t=Hq6kkRtm6oYVTi9f-1

If this is too much of an effort for now, we can just add a divider line between nav and content, but it would be cool to do this so it matches the other places (Like the settings redesign I have here https://www.figma.com/file/IXNCYwXmMWaF6u7Pdv1pOW/Desktop-settings---Nala?type=design&node-id=1025%3A12750&mode=design&t=hlfcLNaOhCrhCZR2-1)

Let me know

[AlanBreck]

And the hover effect, yes, it does look weird, huh. I think it's because it doesn't have a right edge to go against and it's just floating there.

Hmmm... any recommended solutions?

Would it be a lot of work to convert the layout to this? It's the layout I'm using in other places throughout the products.

I think this is out of scope for the Navigation component.

Re. animation: yeah, definitely needs one. We'll just have to build it in a way that it's not glitchy if the navigation leads to full page refreshes. I.e. we don't want it animating up or down on page load.

[fallaciousreasoning]

Mmmh, I don't really like the additional padding - what if we made the background of the content area that gray?

[aguscruiz]

OK then I propose this, remove that padding that gives it a white background, but still keep the gray as a padding (although smaller than the previous design). And a divider between top title and the bottom content area

I don't think we can get away with just a gray background for the content, specially on the other pages in that modal. We need the white background.