Make legend hiding work

index.html

@@ -221,7 +221,7 @@
                     <a href="https://derailvalley.wiki.gg/wiki/Derail_Valley_Wiki">DV Wiki</a>
                 </div>
             </div>
-            <div id="legendButton" class="panel orange" style="height: fit-content;"><svg height="25" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></div>
+            <div id="legendButton" class="panel orange" style="height: fit-content;"><svg style="transform:rotate(180deg) translateY(-3px)" height="25" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></div>
         </div>
     </div>
     <div id="footer" class="orange">

legend.js

@@ -43,6 +43,17 @@ document.addEventListener('DOMContentLoaded', async () => {
     for(let thisSetting of settingEntries){
         addSettingEntry(thisSetting, settingsPanel);
     }
+    const legend = document.getElementById('legend');
+    const legendButton = document.getElementById('legendButton');
+    const legendArrow = legendButton.children[0];
+    let legendState = true;
+    let legendButtonEvent = e => {
+        legendArrow.style.transform = `rotate(${legendState ? 180 : 0}deg) translateY(${legendState ? -3 : 3}px)`;
+        legend.style.transform = `translateX(${legendState ? 0 : legendButton.clientWidth-legend.clientWidth}px)`;
+        legendState = !legendState;
+    };
+    legendButton.addEventListener('click', legendButtonEvent);
+    legendButtonEvent();
 });
 
 function addSettingEntry(thisSetting, parent, indent=0){

style.css

@@ -52,6 +52,18 @@ a:visited{
     border-radius: 0px 10px 10px 0px;
 }
 
+#legendButton{
+    cursor: pointer;
+    user-select: none;
+}
+
+#legend{
+    transition: transform 400ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
+}
+#legendButton>*{
+    transition: transform 200ms ease;
+}
+
 #footer{
     position: fixed;
     width: fit-content;