1 files changed, 44 insertions, 0 deletions
diff --git a/Translate/resources/js/ext.translate.navitoggle.js b/Translate/resources/js/ext.translate.navitoggle.js
new file mode 100644
index 00000000..b421893d
--- /dev/null
+++ b/Translate/resources/js/ext.translate.navitoggle.js
@@ -0,0 +1,44 @@
+/*!
+ * Introduces a toggle icon than can be used to hide navigation menu in vector
+ * @author Niklas Laxström
+ * @license GPL-2.0-or-later
+ */
+( function () {
+	'use strict';
+
+	var $body = $( document.body );
+
+	// Bail out on the new Vector skin
+	if ( $( '#mw-sidebar-button' ).length ) {
+		return;
+	}
+
+	if ( $body.width() < 1000 || mw.storage.get( 'translate-navitoggle' ) === '1' ) {
+		$body.addClass( 'tux-navi-collapsed' );
+	}
+
+	$( function () {
+		var rtl = $body.hasClass( 'rtl' );
+		var delim = rtl ?
+			$( '#mw-head-base' ).css( 'margin-right' ) :
+			$( '#mw-head-base' ).css( 'margin-left' );
+
+		var $miniLogo = $( '#p-logo' )
+			.clone()
+			.removeAttr( 'id' )
+			.addClass( 'tux-navi-minilogo' );
+
+		var $toggle = $( '<div>' )
+			.addClass( 'tux-navitoggle' )
+			.css( rtl ? 'right' : 'left', delim )
+			.on( 'click', function () {
+				$body.toggleClass( 'tux-navi-collapsed' );
+				mw.storage.set(
+					'translate-navitoggle',
+					String( Number( $body.hasClass( 'tux-navi-collapsed' ) ) )
+				);
+			} );
+
+		$body.append( $miniLogo, $toggle );
+	} );
+}() );