WD-2617 - Add sliding animation to sub navigation on mobile

[pedoch]

Done

• Add styles for the sliding navigation
• Add new example for the sliding navigation

Fixes/Issues

• WD-2617

QA

• Open demo
• Check out the Navigation / Sliding under components and make it behaves as expected.
• Check out the other navigation examples as well and make sure they're still working like they used to.
• Review updated documentation:
  • [List any updated documentation for review]

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[if relevant, include a screenshot or screen capture]

[webteam-app]

Demo starting at https://vanilla-framework-4714.demos.haus

[ClementChaumel]

@bartaz @pedoch oops I updated this branch directly instead of creating a PR targeting it. Let me know if it's ok.
If we're happy with the js export here I think it's fine but if there's more discussion to be had, I'll revert it and open it in its own PR so as to not pollute this one.

here I add the slidingNav function directly to the window object. I think moving forward we'd want to maybe bundle everything under a vanillaFramework property to be called like

vanillaFramework.slidingNav('element')

As a side, I tried to use rollup to mimic what we do in the cookie policy repo but I couldn't get it working so I opted for esbuild instead.

[bartaz]

@bartaz @pedoch oops I updated this branch directly instead of creating a PR targeting it. Let me know if it's ok. If we're happy with the js export here I think it's fine but if there's more discussion to be had, I'll revert it and open it in its own PR so as to not pollute this one.

@ClementChaumel I just reverted your commit, it was causing some CI checks fail, and demo didn't run, so make a separate PR and make sure it runs (I guess docker config may need updating to include the built JS file).

here I add the slidingNav function directly to the window object. I think moving forward we'd want to maybe bundle everything under a vanillaFramework property to be called like

vanillaFramework.slidingNav('element')

As a side, I tried to use rollup to mimic what we do in the cookie policy repo but I couldn't get it working so I opted for esbuild instead.

I think we should do it from the start. Once we settle on JS API and expose it we don't want to change it. So good to make it future-proof from the start.

So something like:

vanillaFramework.setupMobileNavigation();
vf.setupMobileNavigation();

We can discuss details in your separate PR I guess.

[bartaz]

Thanks for all the updates. Two small issues remaining:

When you open a dropdown (in mobile mode) and resize screen, dropdown gets closed (but menu remains open). But some class names must be incorrect, because you have to click TWICE on the menu item to reopen this dropdown again.

Second issue is when screen is smaller than menu (for example in mobile landscape mode). When you open dropdown with small number of items you can scroll down and reveal the previous panel.

[bartaz]

@pedoch Good work on the animation!

Few small issues I noticed:

1. It is possible now to open multiple dropdowns on desktop view, this should not happen, opening one should close the others:

2. There is some weird issue with disappearing navigation items.

I think a way to reproduce it is:

• go to mobile view, open the navigation dropdown
• make screen bigger into desktop view
• click on any dropdown
• all navigation disappears

I guess some class names are not removed and mobile styles are applied?

[juanruitina]

Discussing on Jira.

[bartaz]

I haven't looked into details, but how different it is from existing script for search? https://github.com/canonical/vanilla-framework/blob/main/templates/docs/examples/patterns/navigation/_script-search.js

This looks to be share a lot, would it be possible for one script to handle both existing version and sliding version?

[pedoch]

Okay, I'll try combining the file so they work for both versions of the navigation

[ClementChaumel]

@juanruitina @lyubomir-popov would something like that be ok? (I slowed it down to demonstrate better what's happening but it would be quicker ofc)