Highlight current section in the nav

[theletterf]

Fixes #1998

Test: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/2026/building-blocks/

---

This PR was entirely authored using Claude CLI with Claude 4.5 with some direct human intervention.

[theletterf]

@KOTungseth Wanna try it out?

https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/2026/building-blocks/

[reakaleek]

The padding looks off to me. There is much more padding on the right side.
also the color looks too light IMO.

[theletterf]

@reakaleek How about now?

[reakaleek]

maybe that's bit nitpicky..

but IMO the grey box should align with the top dropdown box.

should it also have the same border radius?

[theletterf]

Using -15px -0px -15px -15px:

@reakaleek how about now?

[Mpdreamz]

Can we create an inner box on hover of each item (white)? that stays active when selected?

Thank you for this PR @theletterf!

[Mpdreamz]

I think grey-10 looks slightly better:

Maybe we can use grey-20 as the hover/active background?

[reakaleek]

We would need grey-15 😄

[theletterf]

@Mpdreamz @reakaleek Added hover effect!

[cotti]

General question: Should we have any other kind of highlighting when the user goes further in the navigation tree menu? Or is just the first level there enough?

[theletterf]

@cotti Hmm, not sure. Right now the entire section (all parents) get highlighted. I think this is the same behavior as in the old docs. What are you picturing?