fix(menu): mark "MDN on GitHub" link as external

[brysonbw]

Description

Changes

• Apply external class to external links in menu

Additional details

Before

After

Related issues and pull requests

• About menu: Mark "MDN on github" link as an external link #489

[brysonbw]

I resembled what we have for the same github link in the footer here:

If we want to mark it as external in a different way, that’s smooth - I just thought I’d start by creating a PR with my initial approach.

[caugner]

After

In this screenshot, the external link icon does not look properly aligned (horizontally + vertically).

If this was as trivial as adding the "external" class, then we would have already done so. The CSS needs to be reworked carefully here, maintaining the gap to the icon on the left, without applying this gap to the external icon on the right.

[brysonbw]

Ok, smooth. Thanks for the feedback

[caugner]

I'm fixing the spacing issue in #861. Once that landed, it should be fairly easy to add the external link indicator.

[caugner]

The menu rendering logic has completely changed (see the merge conflict).

Note that the "MDN on GitHub" link now already gets the English indicator in translated locales (see https://developer.mozilla.org/fr/), which is added via ::after.

So when you add the external class, you'll probably need special handling that adds the external link indicator after the English indicator.

Converting to draft for now.

[caugner]

LGTM overall, but let's generalize.

Note that in French, the external indicator now replaces the (angl.) indicator:

• Before:
  
• After:
  

But I think that's actually fine, as we don't have the (angl.) indicator on external links in content either.