Allow user menu to be close after a click inside it (#1005)

Previously if you clicked somewhere inside the user menu, without
clicking on an actual link it would effectively lock the menu into an
open state with no way to close it.

This makes it so that a click outside the menu will close it.

Fixes #987

bullet_train/app/javascript/controllers/desktop_menu_controller.js

@@ -3,6 +3,14 @@ import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
   static targets = [ "menuItemHeader", "menuItemGroup", "menuItemLink" ];
 
+  connect() {
+    document.addEventListener('click', this.handleClickOutside.bind(this))
+  }
+
+  disconnect() {
+    document.removeEventListener('click', this.handleClickOutside.bind(this))
+  }
+
   showSubmenu() {
     this.menuItemGroupTarget.classList.remove('invisible');
   }
@@ -23,4 +31,10 @@ export default class extends Controller {
 
     if(hideMenu) { this.menuItemGroupTarget.classList.add('invisible'); }
   }
+
+  handleClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.menuItemGroupTarget.classList.add('invisible')
+    }
+  }
 }