Meganav prototype v2

[sowasred2012]

Done

• Added v2 of the mega nav prototype, the first of two variants (the second is here)
  • This one features a "left hand side" layout on the products dropdown

Not to be merged - for demo purposes only

QA

• Check out this feature branch
• Run the site using the command ./run serve or dotrun
• View the site locally in your web browser at: http://0.0.0.0:8001/

Issue / Card

Fixes https://github.com/canonical-web-and-design/web-squad/issues/4834

[webteam-app]

Demo starting at https://ubuntu-com-11287.demos.haus

[codecov[bot]]

Codecov Report

Merging #11287 (b743a53) into main (ebb5490) will decrease coverage by 2.33%. The diff coverage is n/a.

:exclamation: Current head b743a53 differs from pull request most recent head f67690e. Consider uploading reports for the commit f67690e to get more accurate results

@@            Coverage Diff             @@
##             main   #11287      +/-   ##
==========================================
- Coverage   61.02%   58.68%   -2.34%     
==========================================
  Files         100      109       +9     
  Lines        2381     2544     +163     
  Branches      652      708      +56     
==========================================
+ Hits         1453     1493      +40     
- Misses        869      990     +121     
- Partials       59       61       +2     

Impacted Files	Coverage Δ
...ubscriptions/SubscriptionList/SubscriptionList.tsx	54.54% <0.00%> (-4.43%)	:arrow_down:
...ubscriptions/SubscriptionEdit/SubscriptionEdit.tsx	86.77% <0.00%> (-4.04%)	:arrow_down:
.../src/PurchaseModal/hooks/useStripeCustomerInfo.jsx	6.66% <0.00%> (-3.34%)	:arrow_down:
...onents/Subscriptions/RenewalModal/RenewalModal.tsx	11.11% <0.00%> (-1.39%)	:arrow_down:
...al/hooks/usePostCustomerInfoForPurchasePreview.tsx	5.88% <0.00%> (-0.37%)	:arrow_down:
.../src/advantage/react/hooks/useUserSubscriptions.ts	92.85% <0.00%> (-0.25%)	:arrow_down:
.../src/PurchaseModal/hooks/registerPaymentMethod.tsx	3.22% <0.00%> (-0.23%)	:arrow_down:
static/js/src/PurchaseModal/PurchaseModal.tsx	2.43% <0.00%> (-0.20%)	:arrow_down:
...criptions/RenewalModal/RenewButton/RenewButton.tsx	1.66% <0.00%> (-0.06%)	:arrow_down:
...src/PurchaseModal/components/PaymentMethodForm.tsx	1.16% <0.00%> (-0.03%)	:arrow_down:
... and 23 more

[sowasred2012]

@lyubomir-popov @davegoddard42 I've updated this prototype according to our earlier conversation - take a look, let me know if there are other changes and/or if you want these changes applied to the other prototype as well.

[sowasred2012]

@lyubomir-popov @davegoddard42 - I had a quick catch up with Dave earlier, and I've implemented the feedback we talked about:

• the small copy below a lot of the links is now #aaa
• tweaked the style of the "View all" link to match the design
• updated the links and replaced lorem ipsum based on what's in the spreadsheet
• added dividing lines between the items in the right hand panel of the Use Case menu

[lyubomir-popov]

@sowasred2012 I pushed a pr for the font weight, a few more thoughts:

• the inverted link component will get an underline in a planned update, so I would use a bespoke meganav-scoped class for the white links in there
• the orange highlight on the top nav shouls be white in the new design, but mybe this will change in the base component, not sure if this will need to go live before vanilla releases the update in time (I also pushed a font weight update as a separate pr)

[minkyngkm]

@lyubomir-popov could you take a look at this?