Admin: Drop the Main page button; the rail logo already links there

2026-08-13T01:04:23Z

Drop the Main page button; the rail logo already links there

← Older revision		Revision as of 01:04, 13 August 2026
Line 26:		Line 26:
	}		}

			// No Main Page entry: the logo at the top of the rail already links there.
	var items = [		var items = [
	~~{ title: 'Main Page', icon: 'home', label: 'Main page' },~~
	{ title: 'Help:Getting started', icon: 'help', label: 'How to edit' },		{ title: 'Help:Getting started', icon: 'help', label: 'How to edit' },
	{ title: 'Special:Upload', icon: 'upload', label: 'Upload a file' },		{ title: 'Special:Upload', icon: 'upload', label: 'Upload a file' },

Admin: Pin main navigation into the Citizen header rail as icon buttons

2026-08-13T01:00:51Z

Pin main navigation into the Citizen header rail as icon buttons

New page

/**
* Pin the main navigation into Citizen's header rail as icon buttons, so the
* common destinations are one click away instead of hidden behind the hamburger.
*
* Citizen leaves <div class="citizen-header__start"> empty and offers no config
* or hook to populate it, so it is filled here. The hamburger drawer is left
* completely alone and remains the full menu.
*
* URLs come from mw.util.getUrl() rather than being hardcoded, so this keeps
* working if $wgArticlePath ever changes. The markup deliberately copies the
* classes Citizen's own rail buttons use (see Preferences.mustache), so the
* buttons inherit the native look instead of needing bespoke CSS.
*
* Icons must exist in the skins.citizen.icons pack (60 of them); home, help,
* upload, recentChanges and die all do.
*
* Failure mode: if a Citizen upgrade renames the slot, querySelector returns
* null, this exits quietly and the hamburger still has every link.
*/
mw.loader.using( 'mediawiki.util' ).then( function () {
var slot = document.querySelector( '.citizen-header__start' );

// Bail if the slot is missing (skin changed) or already filled (double-run).
if ( !slot || slot.childElementCount > 0 ) {
return;
}

var items = [
{ title: 'Main Page', icon: 'home', label: 'Main page' },
{ title: 'Help:Getting started', icon: 'help', label: 'How to edit' },
{ title: 'Special:Upload', icon: 'upload', label: 'Upload a file' },
{ title: 'Special:RecentChanges', icon: 'recentChanges', label: 'Recent changes' },
{ title: 'Special:Random', icon: 'die', label: 'Random page' }
];

items.forEach( function ( item ) {
var link = document.createElement( 'a' );
link.href = mw.util.getUrl( item.title );
link.title = item.label;
link.className = 'citizen-header__item citizen-cdx-button--size-large ' +
'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled ' +
'cdx-button--weight-quiet cdx-button--icon-only';

var icon = document.createElement( 'span' );
icon.className = 'citizen-ui-icon mw-ui-icon-wikimedia-' + item.icon;

// cdx-button--icon-only hides this visually but keeps it for screen readers.
var text = document.createElement( 'span' );
text.textContent = item.label;

link.appendChild( icon );
link.appendChild( text );
slot.appendChild( link );
} );
} );

MediaWiki:Common.js - Revision history

Admin: Drop the Main page button; the rail logo already links there

Admin: Pin main navigation into the Citizen header rail as icon buttons