feat: hide menu when clicked outside

resources/skins.citizen.scripts/checkboxHack.js

@@ -0,0 +1,40 @@
+var DRAWER_ID = 'mw-drawer',
+	DRAWER_CHECKBOX_ID = 'mw-drawer-checkbox',
+	PERSONAL_MENU_ID = 'p-personal',
+	PERSONAL_MENU_CHECKBOX_ID = 'personalmenu-checkbox';
+
+/**
+ * Uncheck CSS hack checkbox when clicked outside
+ *
+ * @param {HTMLElement} element
+ * @param {HTMLElement} checkbox
+ */
+function uncheckOnClickOutside( element, checkbox ) {
+	var listener = function ( e ) {
+		if ( e.target !== checkbox && e.target !== element ) {
+			checkbox.checked = false;
+			document.removeEventListener( 'click', listener );
+		}
+	};
+	checkbox.addEventListener( 'click', function () {
+		if ( this.checked ) {
+			document.addEventListener( 'click', listener );
+		}
+	} );
+}
+
+/**
+ * @return {void}
+ */
+function init() {
+	var drawer = document.getElementById( DRAWER_ID ),
+		drawerCheckbox = document.getElementById( DRAWER_CHECKBOX_ID ),
+		personalMenu = document.getElementById( PERSONAL_MENU_ID ),
+		personalMenuCheckbox = document.getElementById( PERSONAL_MENU_CHECKBOX_ID );
+	uncheckOnClickOutside( drawer, drawerCheckbox );
+	uncheckOnClickOutside( personalMenu, personalMenuCheckbox );
+}
+
+module.exports = {
+	init: init
+};

resources/skins.citizen.scripts/skin.js

@@ -1,5 +1,6 @@
 var themeToggle = require( './themeToggle.js' ),
-	search = require( './search.js' );
+	search = require( './search.js' ),
+	checkboxHack = require( './checkboxHack.js' );
 
 /**
  * @return {void}
@@ -7,6 +8,7 @@ var themeToggle = require( './themeToggle.js' ),
 function main() {
 	themeToggle.init();
 	search.init();
+	checkboxHack.init();
 }
 
 main();

skin.json

@@ -130,7 +130,8 @@
 			"packageFiles": [
 				"resources/skins.citizen.scripts/skin.js",
 				"resources/skins.citizen.scripts/themeToggle.js",
-				"resources/skins.citizen.scripts/search.js"
+				"resources/skins.citizen.scripts/search.js",
+				"resources/skins.citizen.scripts/checkboxHack.js"
 			],
 			"dependencies": [
 				"mediawiki.page.ready",