Main navigation dropdown

[jhonatan-lopes]

Description

• Main Navigation Dropdown | Post Launch Items #11978
• https://mozilla-hub.atlassian.net/browse/TP-264

Merge Method
💡❗Remember to use regular merge for merging this feature branch into main

┆Issue is synchronized with this Jira Task

[sabrinang]

Great progress on this @jhonatan-lopes! I know you mentioned some things missing but I included some in my review anyway and will leave QA feedback here:

All

• Iconography: currently using ascii arrows but can use svg arrow icons in button and links and when icons are used (like in featured section) they are squished and cropped but they can shrink proportionally instead
• Text style: link items are more bold than designed
• Text alignment: link items can align with column headings so that on hover state the highlighted box extends so text is in alignment instead of the box edge
• Orientation: no line indicated when on current page

Desktop

• Dropdown width: is there the possibly of extending width/padding beyond container/grid so there is more horizontal space on desktop (see designs) and this could help extend the column width, so the line length isn’t as short
• Visual detail: dropdown menu top border grey is a bit thicker than design

Tablet

• Content alignment: width of content can have more left/right margins to match with nav above
• Spacing: Increase spacing above newsletter button

Tablet/Mobile

• Hover state: Primary nav item hover states appear beyond row
• Open/Closed states: one accordion open at a time (close previously opened ones)

CMS Editing Experience

• Icons for CMS section: will these be updated with the ones I exported for you?
• Navigation button: we can add some help text mentioning if overview column is present this buttons appears in that column
• The spacing of the + signs are very close to the title but it actually aligns with the previous section above it which may be a bit confusing due to the proximity
• If we have multiple navigations made, how do you toggle between them?

[nancyt1]

Supplementing Sabrina's comment with screenshots:

• Missing about 1.5rem of space after the last column on mobile before the divider line.
• Are we able to add more spacing at these lines? It gets confusing what plus sign belongs to which section.
• Nav item should be aligned with the column title. And Is it possible to extend the nav past the mozilla logo and/or decrease margins between the nav columns? Line length does feel a little short.

[jhonatan-lopes]

Hi @nancyt1 and @sabrinang, thanks for the feedback!

Some points:

Iconography: currently using ascii arrows but can use svg arrow icons in button and links and when icons are used (like in featured section) they are squished and cropped but they can shrink proportionally instead

I've set up the backend/templates to use SVGs with a width/height of 18px (font size). Non-vector images will get blurry. There is a ticket to put validation in place so that editors only use SVGs on those image choosers but please let me know if you'd like to remove that restriction to also have raster images.

Orientation: no line indicated when on current page

This will be handled in a subsequent ticket.

Dropdown width: is there the possibly of extending width/padding beyond container/grid so there is more horizontal space on desktop (see designs) and this could help extend the column width, so the line length isn’t as short

It's using the container class now, but I'll add some negative margins to make it larger.

Visual detail: dropdown menu top border grey is a bit thicker than design

It's using 1px, exactly as the design indicated. The difference might be that there's 1px from the dropdown's top border + 1px for the navbar's bottom border. I'll try to disable the dropdown's top border on hover and see if that helps.

Open/Closed states: one accordion open at a time (close previously opened ones)

I'll fix it 👍

Icons for CMS section: will these be updated with the ones I exported for you?

Yes, I'll update those!

Navigation button: we can add some help text mentioning if overview column is present this buttons appears in that column

Will do

The spacing of the + signs are very close to the title but it actually aligns with the previous section above it which may be a bit confusing due to the proximity

Yes, this is an issue with Wagtail itself and how it's rendering the form. I'll try to add some CSS overrides from our side...

If we have multiple navigations made, how do you toggle between them?

You can keep multiple snippets under the "Navigation Menus" menu. To activate one of them, go to "Settings" > "Navigation Menu" and then select the one that you want to activate. Once you click save that menu will be active for the site defined in the setting.

Missing about 1.5rem of space after the last column on mobile before the divider line.

Thanks for flagging that up!

Are we able to add more spacing at these lines? It gets confusing what plus sign belongs to which section.

Same thing I've flagged before, it's a Wagtail issue with the form but I'll try to put some overrides on our side.

Nav item should be aligned with the column title. And Is it possible to extend the nav past the mozilla logo and/or decrease margins between the nav columns? Line length does feel a little short.

Will do

[nancyt1]

@jhonatan-lopes Is there a way we can add a super small delay on the menu so it doesn't open immediately on mouse over? I'm thinking about the instances where I'm moving my mouse to something past the menu and I don't really want it to flash open. The wirecutter site does kinda what i was thinking. I also don't want to lose the snappiness of going between menus tho.

Menu.mov

[jhonatan-lopes]

Hi @nancyt1, I'll add that to the "animations" ticket!

[nancyt1]

1. Requesting some spacing updates to mobile! The red line is where the nav links should line up too. Hope this is better than me just typing it out.

2. In the mockup we had the blog right aligned so that it feels more connected when opened, are we still able to do that?

[jhonatan-lopes]

Further feedback has been addressed on #12259

[robdivincenzo]

Your magnum opus, @jhonatan-lopes 🔥🔥🔥

[data-sync-user]

➤ Kristina Shu commented:

Simon Acosta Torres I can’t tell what this ticket is, is it for dev? Can it be closed?

[data-sync-user]

➤ Simon Acosta Torres commented:

Kristina Shu This is a PR that as I can see, has already been merged to the code. I will proceed to close this synced ticket.