fix (menu): mark github link in about menu as external

Author: brysonbw

components/menu/constants.js

@@ -415,6 +415,7 @@ export const TABS = [
             href: "https://github.com/mdn",
             text: "MDN on GitHub",
             icon: "github",
+            external: true,
           },
         ],
       },

components/menu/server.css

@@ -3,3 +3,8 @@
 @import url("base.css");
 @import url("mobile.css");
 @import url("desktop.css");
+
+.external::after {
+  margin-bottom: 0.1em;
+  margin-left: 0.5em;
+}

components/menu/server.js

@@ -109,6 +109,7 @@ export class Menu extends ServerComponent {
                                             item.icon && "menu__panel-icon",
                                             context.locale !== "en-US" &&
                                               "only-in-en-us",
+                                            item.external && "external",
                                           ]
                                             .filter(Boolean)
                                             .join(" "),

components/menu/types.d.ts

@@ -23,6 +23,7 @@ interface SlugItem extends BaseItem {
 interface HrefItem extends BaseItem {
   href: string;
   icon?: string;
+  external?: boolean;
 }
 
 type LinkItem = SlugItem | HrefItem;