Make header links collapsible on mobile (#262)

-Add two new functions to imports.js: expandHeader() and collapseHeader()
-expandHeader() expands the dropdown that appears on screens <1154px and collapseHeader() collapses the dropdown.
-On desktop, hovering on the dropdown will open it and hovering off it will close it.
-On mobile, clicking on the dropdown will open it and clicking somewhere else will close it.

Author: Accio1

resources/imports.js

@@ -1,4 +1,6 @@
+var referenceLink = "";
 function reference(link) {
+	referenceLink = link;
 	const headerContent = `
 	<a href="${link}" target="_parent">
 		<img src="${link}resources/icon.png" width="64px" height="64px" class="navHomeIcon">
@@ -7,8 +9,7 @@ function reference(link) {
 	<a href="${link}forumhelpers" class="navButton" target="_parent">List Of Forum Helpers</a>
 	<a href="https://scratch.mit.edu/studios/3688309/" class="navButton" target="_blank">Our Scratch Studio</a>
 	<a href="https://theforumhelpers.github.io/QuickReply/" class="navButton" target="_parent">QuickReply</a>
-
-	<div class="expandableDropdown">
+	<div class="expandableDropdown" onmouseover="expandHeader()" onmouseout="collapseHeader()">
 		<a class="expandableLink" href="${link}forumhelpers">List Of Forum Helpers</a>
 		<a class="expandableLink" href="https://scratch.mit.edu/studios/3688309/">Our Scratch Studio</a>
 		<a class="expandableLink" href="https://theforumhelpers.github.io/QuickReply/">QuickReply</a>
@@ -52,3 +53,33 @@ function denyPrivacy() {
 	localStorage.removeItem("FHacceptedDate");
 	window.location.href = "https://scratch.mit.edu/studios/3688309/";
 }
+
+function expandHeader() {
+	var headerDropdown = document.getElementsByClassName("expandableDropdown")[0];
+	headerDropdown.style.backgroundImage = "url('" + referenceLink + "resources/arrow.svg')";
+	headerDropdown.style.height = "60px";
+	var headerLinks = document.getElementsByClassName("expandableLink");
+	for (k = 0; k < headerLinks.length; k++) {
+		headerLinks[k].style.display = "inline";
+	}
+}
+
+function collapseHeader() {
+	var headerDropdown = document.getElementsByClassName("expandableDropdown")[0];
+	headerDropdown.style.backgroundImage = "url('" + referenceLink + "resources/expandable.svg')";
+	headerDropdown.style.height = "50px";
+	var headerLinks = document.getElementsByClassName("expandableLink");
+	for (k = 0; k < headerLinks.length; k++) {
+		headerLinks[k].style.display = "none";
+	}
+}
+
+window.ontouchstart = function(event) {
+	clickLocation = event.target.className;
+	if (clickLocation != "expandableDropdown" && clickLocation != "expandableLink") {
+		collapseHeader();
+	}
+	if (clickLocation == "expandableDropdown") {
+	    expandHeader();
+	}
+}

resources/stylesheet.css

@@ -162,18 +162,6 @@ header {
 	height: 50px;
 	box-sizing: border-box;
 	margin: 0px;
-}
-
-.expandableDropdown:hover {
-	background-image: url("arrow.svg"); /*TODO add an animation for a less abrupt change*/
-	position: absolute;
-	right: 0;
-	top: 0;
-	height: 60px;
-}
-
-.expandableDropdown:hover .expandableLink {
-	display: inline;
 	position: relative;
 	top: 60px;
 	left: 10px;