Make menu draggable

client-data/board.css

@@ -54,7 +54,6 @@ html, body, svg {
 	transition-duration: 1s;
 	cursor: default;
 	padding: 10px;
-	pointer-events: none;
 }
 
 #menu.closed {
@@ -84,7 +83,7 @@ html, body, svg {
 }
 
 #settings {
-	margin-bottom: 0;
+	margin-bottom: 20px;
 }
 
 #menu .tool {
@@ -285,4 +284,4 @@ circle.opcursor {
 	label.tool-name[for=chooseColor] {
 		line-height: 10px;
 	}
-}
+}

client-data/board.html

@@ -35,7 +35,7 @@
 
 	<div id="loadingMessage">{{translations.loading}}</div>
 
-	<div id="menu" {{#hideMenu}}style="display:none;"{{/hideMenu}}>
+	<div id="menu" tabindex="0" {{#hideMenu}}style="display:none;"{{/hideMenu}}>
 		<div id="menuItems">
 			<ul id="tools" class="tools">
 				<li class="tool" tabindex="-1">

client-data/js/board.js

@@ -682,3 +682,26 @@ Tools.svg.height.baseVal.value = document.body.clientHeight;
 	  "stylesheet" : "style.css",
 }
 */
+
+
+(function () {
+    let pos = {top: 0, scroll:0};
+    let menu = document.getElementById("menu");
+    function menu_mousedown(evt) {
+	pos = {
+	    top: menu.scrollTop,
+	    scroll: evt.clientY
+	}
+	menu.addEventListener("mousemove", menu_mousemove);
+	document.addEventListener("mouseup", menu_mouseup);
+    }
+    function menu_mousemove(evt) {
+	const dy = evt.clientY - pos.scroll;
+	menu.scrollTop = pos.top - dy;
+    }
+    function menu_mouseup(evt) {
+	menu.removeEventListener("mousemove", menu_mousemove);
+	document.removeEventListener("mouseup", menu_mouseup);
+    }
+    menu.addEventListener("mousedown", menu_mousedown);
+})()