Implement desktop dropdown in meganav

petesfrench commented 2 months ago

Done

Implements the HTML and JS needed for dropdown functionality in the meganav. Based on the work done by Bartek in the vanilla team here: https://github.com/canonical/vanilla-framework/pull/5213
Adds the navigation to build
Some basic refactoring to get the JS to work in this instance and modulising to make it easier to understand

You should follow these QA steps on the regular navigation and reduced navigation. Mobile can be ignored for this PR.
Click on a dropdown button (ie. products, solutions, etc) and see that the corresponding dropdown opens, note the content is a place holder. Click again to close.
Click on a dropdown button, click outside the navigation and see the dropdown closes
Click on a dropdown button, open the search and see the dropdown closes
When a dropdown opens, it should side down appearing from underneath the top navigation.
When a dropdown closes, it should slide down disappearing underneath the top navigation.
When switching between different dropdowns (ie. products, solutions, etc), no animation should be played
The dropdown should match the one in the vanilla example

webteam-app commented 2 months ago

petesfrench commented 2 months ago

@britneywwc Thanks for the review. Yes, you can ignore most mobile changes. They will be addressed in later PRs.

For the secondary-navigation.js, you can test it by visiting https://canonical-com-1301.demos.haus/data on mobile, you should be able to open/close the dropdown:

britneywwc commented 2 months ago

Cool, just tested out the secondary nav and it looks great