Fix styling issues of meganav on small screens

[bartaz]

Done

Addresses styling and scrolling issues in mobile version of mega navigation

• fixes scroll when there are many items in the nav on mobile
• removes visual glitches when scrolling
• makes styling inside mobile nav more consistent

Fixes: https://warthogs.atlassian.net/browse/WD-13787

QA

• Example (test in mobile view to see sliding nav instead of full width dropdowns):
  https://vanilla-framework-5110.demos.haus/docs/examples/patterns/navigation/dropdown-full-width?theme=light
• Note: scope of the PR is focused on the functionality of the sliding navigation strucutre (scrolling, sliding animation, etc) - styling of individual items inside of mobile navigation (such as quick links, download buttons, etc) is not part of this PR (they are added only for demo purposes)
• Test:
  • Click around the nested levels of the navigation, make sure it animates as expected
  • Check if scroll works as expected
  • Verify that desktop view didn't get broken
• Check other related examples:
  • Reduced navigation: should have the same content and work the same: https://vanilla-framework-5110.demos.haus/docs/examples/patterns/navigation/reduced?theme=light
  • Sliding navigation (should still work as well): https://vanilla-framework-5110.demos.haus/docs/examples/patterns/navigation/sliding-dark?theme=light

QA Note

In Vanilla examples view the bottom toolbar is covering some space on the bottom of the screen. In normal view it would not be there and there will be more of the dropdown visible.

Implementation note

This PR introduces 2 new class names required by JS.

js-navigation-sliding-panel needs to be added on the elements with p-navigation__dropdown CSS class name (so that they are correctly targeted when selecting a dropdown to activate), it also needs to be added on a top level p-navigation__items element (the one containing first level of mobile sliding navigation items)

js-navigation-dropdown-toggle needs to be added on elements with p-navigation__item--dropdown-toggle class name.

[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

Screen.Recording.2024-08-08.at.12.28.46.PM.mov

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!