WIP: sliding meganav in Vanilla

[bartaz]

Done

WIP demo of sliding meganav in Vanilla

Two relevant examples:

Ubuntu.com HTML markup moved to Vanilla: https://vanilla-framework-5110.demos.haus/docs/examples/patterns/navigation/sliding-meganav-ubuntu

Clean Vanilla reimplementation (incomplete): https://vanilla-framework-5110.demos.haus/docs/examples/patterns/navigation/sliding-meganav

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

Reduced navigation: should have the same content and work the same: https://vanilla-framework-5110.demos.haus/docs/examples/patterns/navigation/reduced?theme=light

Reduced nav example now defaults to being opened, which removes the non-opened nav from visual testing coverage. is this intended?

[bartaz]

Reduced nav example now defaults to being opened, which removes the non-opened nav from visual testing coverage. is this intended?

Good catch. I made it open in the dropdown full width example, but it doesn't have to be open in reduced example. Updated.

[petesfrench]

Could we add a couple rems to the bottom of the list views? Currently the last item is almost flush with the view port making it quite hard to read/click.

[bartaz]

Could we add a couple rems to the bottom of the list views? Currently the last item is almost flush with the view port making it quite hard to read/click.

I hacked in some spacing there. This should hopefully add a bit of space there and help with the 100vh address bar issue (because there should be enough spacing to scroll past the height of address bar).

Solution is ugly, but I couldn't find any better way. The way the sliding panels are structured and how the scroll works there is a mystery. And I don't think we can do much better without some significant changes there.

[jmuzina]

Clicking the "LXCFS -> Nested Layer" dropdown on the sliding dark example and then clicking nested layer dropdown multiple times causes the takeover overlay to disappear while the navigation is still open - this seems unexpected

https://github.com/user-attachments/assets/ac5cbb54-6ffc-497c-82cc-7797717961ae

However this happens on main / staging right now, so I'm not sure if it's a problem we have to worry about for this PR

[bartaz]

Clicking the "LXCFS -> Nested Layer" dropdown on the sliding dark example and then clicking nested layer dropdown multiple times causes the takeover overlay to disappear while the navigation is still open - this seems unexpected

Good catch @jmuzina . Not ideal for sure, and not expected, but this is an edge case that doesn't happen in production (we don't use nested dropdowns like these in prod). It's an old example from the times when we did have support for sliding navigation on mobile, but not full meganav dropdowns. Maybe it will make sense to drop them now.

But I'd rather ignore it in this PR, and address separately.

[jmuzina]

Clicking the "LXCFS -> Nested Layer" dropdown on the sliding dark example and then clicking nested layer dropdown multiple times causes the takeover overlay to disappear while the navigation is still open - this seems unexpected

Good catch @jmuzina . Not ideal for sure, and not expected, but this is an edge case that doesn't happen in production (we don't use nested dropdowns like these in prod). It's an old example from the times when we did have support for sliding navigation on mobile, but not full meganav dropdowns. Maybe it will make sense to drop them now.

But I'd rather ignore it in this PR, and address separately.

Created #5288 to tackle that issue separately!