chore(navigation-menu): style and text updates to condense menu

[brysonbw]

Description

Changes

• Remove Learn/Tools icons
• Update Web APIs text/verbiage to APIs
• Applied updated search input styling for the --screen-menu-compact breakpoint
• Updated the @Custom-Media definition for --screen-menu-compact

Screen recordings

Before

1436-before.mov

After

1436-after.mov

Related issues and pull requests

• Condense compact menu further #1436

[github-actions]

c7d6c76 was deployed to: https://fred-pr1710.review.mdn.allizom.net/

[pepelsbey]

Remove Learn/Tools icons

The issue suggested hiding icons at narrow viewports, not removing them.

I fully understand that the linked issue is pretty brief, but there's something that's been misunderstood in this PR: the changes proposed in the issue are adaptive (depending on the available space), not static (for all viewports).

It means, for example, that icons are there on desktop and on mobile viewports, but are hidden on narrow viewports, just before mobile. The same for Web APIs turning to APIs, etc.

[brysonbw]

Remove Learn/Tools icons

The issue suggested hiding icons at narrow viewports, not removing them.

I fully understand that the linked issue is pretty brief, but there's something that's been misunderstood in this PR: the changes proposed in the issue are adaptive (depending on the available space), not static (for all viewports).

It means, for example, that icons are there on desktop and on mobile viewports, but are hidden on narrow viewports, just before mobile. The same for Web APIs turning to APIs, etc.

Thanks for clarifying. Would using the --screen-small-and-narrower CSS variable in a media query target the viewport mentioned or --screen-medium-and-narrower variable or --screen-menu-compact @caugner?

[LeoMcA]

Would using the --screen-small-and-narrower CSS variable in a media query target the viewport mentioned or --screen-medium-and-narrower variable or --screen-menu-compact

@brysonbw Almost, for the menu we use a specific set of breakpoints, independent of the general breakpoints: the main breakpoint is at 1044px: wider than that is the "desktop menu" (--screen-menu-full), narrower than that is the "mobile menu" (--screen-menu-hamburger).

Within the "desktop menu" we have a compact mode (between 1044px and 1104px, though the --screen-menu-compact currently covers all of "less than 1104px"). It's this compact mode we want to hide icons etc. on

[LeoMcA]

Good stuff! You were right to convert to mdn-button - apologies for leading your astray - let's make that change again, so styles are pretty default for the search button within the compact range, and then we build the mocked input styles on top.

Also, now that we've condensed the menu a bunch, let's update that 1044px breakpoint to be smaller - get it as small as you can without a horizontal scrollbar appearing - there should be an e2e test which catches that happening.

[LeoMcA]

Hmm, I think your original instincts to turn this into a mdn-button were right: we're missing a few things here relative to the adjacent login/out button (the background hover colour, the icon centering, etc.).

I reckon it would be safer to start with the default mdn-button styling, then build the fake input styling on top of that with a @media not (--screen-menu-compact) query.

[brysonbw]

Is this something we are looking to achieve @LeoMcA?

Here in video: @custom-media --screen-menu-compact (960px < width <= 1104px);

1436-1-after.mov

[LeoMcA]

@brysonbw on the right track, but can we style the "fake input" again over the top of the mdn-button for the full width and mobile menus (i.e. where your video starts and ends), so resizing wide to narrow we go: "fake input", normal button, "fake input" again?

I think we can go more aggressive with that breakpoint too: the buttons and menu should nearly touch before we collapse to the compact menu, and then again before we collapse to the hamburger

[brysonbw]

Good stuff! You were right to convert to mdn-button - apologies for leading your astray - let's make that change again, so styles are pretty default for the search button within the compact range, and then we build the mocked input styles on top.

Also, now that we've condensed the menu a bunch, let's update that 1044px breakpoint to be smaller - get it as small as you can without a horizontal scrollbar appearing - there should be an e2e test which catches that happening.

All good brother. Thanks for the feedback