Topic on Extension talk:MobileFrontend

Hi guys, adding new entries in the mobile menu isn't straightforward. Basing on two previous ideas, I developed a new one, in my opinion the most universal:

1. Menu entry is added via JavaScript code, using MediaWiki libraries.
2. Due to existing bug (https://phabricator.wikimedia.org/T240910), my solution includes a workaround (JS+CSS).
3. You can use any OOUI icon (but they are black, not gray. I didn't realize how fix it).

So, two parts. In MediaWiki:Mobile.js add:

/* Add some links to the menu */
$.when( mw.loader.using(['mediawiki.util', 'oojs-ui.styles.icons-interactions']), $.ready ).then( function() {
   var styleClasses = ["menu-list-item__button", "mw-ui-icon", "mw-ui-icon-before"]

   // Repeat following part for every link you want to add
   var helpUrl = mw.util.getUrl( '<page title>' ); // Here put the page title to get the valid URL
   
   // pt-preference is a section where add the link, more you find on 
   // https://en.wikipedia.org/wiki/Help:Customizing_toolbars
   var helpNode = mw.util.addPortletLink( 'pt-preferences', helpUrl, '<link name>').getElementsByTagName("a")[0];

   // Here you decide which icon to use. You can select any from the page below:
   // https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=mobile
   // In this example, I choose "helpNotice" from section "interactions". 
   // To use it, I needed to load "oojs-ui.styles.icons-interactions"
   // in the first line of the script, and build the class name as below. 
   // As an alternative, use icons referenced in previous solutions (links at the end).
   helpNode.classList.add("mw-ui-icon-helpNotice");
   styleClasses.map(function(x) {helpNode.classList.add(x)});
} );

Then, in MediaWiki:Mobile.css add:

/* Workaround for wrong menu rendering */
#mw-mf-page-left ul li a {
   font-size: 0.875em;
   font-weight: bold;
   vertical-align: middle;
}

#mw-mf-page-left ul li a span {
   font-size: 1em !important;
}

You can see an example how it works on https://wiki.fnin.eu/

Reference for other solutions: Topic:Vqy1kx6q4e0bzvyb and Topic:Tiggc18fvd3stmsf