Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Gadgets/vectorScripts/main.js: Difference between revisions

MediaWiki interface page
>Westgrass
also toggle .nav--expanded on #mw-panel whenever mobile nav toggle button is toggled. This makes mobile sidebar menu styling easier.
 
imported>Westgrass
m 1 revision imported
 
(No difference)

Latest revision as of 06:43, 1 November 2025

/*** Mobile navigation toggle button ***/
( function () {
	const BUTTON_CLASS = 'mobile-nav-toggle';
	const EXPANDED_CLASS = 'nav--expanded';
	if (document.querySelector('button.' + BUTTON_CLASS)){return;} // early return to avoid double button if this runs twice
	
	let mobileSidebarButton = document.createElement( 'button' );
	let sidebar = document.getElementById( 'mw-panel' );
	mobileSidebarButton.className = BUTTON_CLASS;
	mobileSidebarButton.addEventListener( 'click', function () {
		mobileSidebarButton.classList.toggle( EXPANDED_CLASS );
		sidebar.classList.toggle( EXPANDED_CLASS );
	} );
	sidebar.prepend( mobileSidebarButton );
	document.body.classList.add( 'has-vector-mobile-menu' );
} )();
/*** End mobile navigation toggle button ***/

/*** #mw-head collapsing fix ***/
/*** IMPORTANT: Do not copy this code if your wiki is not updated to default loadout 2.0 (May 22, 2025) or later, or your navigation tabs will break ***/
mw.loader.using('skins.vector.legacy.js', function() {
	$.collapsibleTabs.calculateTabDistance = function(){
		return parseInt(window.getComputedStyle(document.getElementById( 'right-navigation' ), '::before').width ) - 1;
	}
});
/*** END #mw-head collapsing fix ***/

Join the DMW Community

Guides, patch discussion, and help from the community all happen on Discord.

Join Discord